在HTML块中的特定单词上收听鼠标事件

我有一些文本使用GWT HTML对象显示在网页中。该文本包含一组特定的单词。我想在用户点击时弹出一些内容（如果他将鼠标悬停在某个时间上，如果它很容易实现这些内容），则可以使用这些特殊字词中的任何一个。在HTML块中的特定单词上收听鼠标事件

这是如何实现的？

请注意，我可以完全控制文本，并且可以根据需要在这些特殊字词的周围添加任何特定标签。

2011-11-01 Suresh

从任何事件中，您都可以使用event.getNativeEvent().getEventTarget()轻松获取确切的元素目标，然后您可以检查您插入到HTML中的标记元素的某些特定特征。因此，您需要将鼠标事件添加到HTML小部件中，并使用所谓的“事件代理”。

final HTML widget = new HTML("some text with <span data-my-marker='foo'>marked words</span> in it"); 
widget.addClickHandler(new ClickHandler() { 
    @Override 
    public void onClick(ClickEvent event) { 
     Element target = Element.as(event.getNativeEvent().getEventTarget()); 
     // walk up until we reach a marker 'span' or the HTML widget's root element 
     // just in case the marked words have markup in them 
     while (!target.equals(widget.getElement())) { 
     if (isMarker(target)) { 
      // found a marker 'span'; process it and exit the loop 
      String data = span.getAttribute('data-my-marker'); 
      Window.alert(data); 
      break; 
     } 
     // otherwise, continue looping 
     target = target.getParentElement(); 
     } 
    } 

    private boolean isMarker(Element elt) { 
     return elt.hasTagName("span") && elt.hasAttribute("data-my-marker") 
    } 
});

（作为一个侧面说明，关于使用data-*属性：http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes）

来源

2011-11-01 15:30:51

好的，你打败了我。现在我可以删除我还没有发布的答案;-) –

-1

您可以创建一个扩展Label并实现mouseListener的新类。

在onHover方法中，您创建一个新的PopupPanel。

一个很好的例子可以在这里找到：

http://examples.roughian.com/index.htm#Listeners~MouseListener

刚刚从你的HTML对象过滤这些话，使他们成为你的新标签类，并把它们放回面板。

来源

2011-11-01 14:30:23 Rohan