在HTML塊中的特定單詞上收聽鼠標事件

Question

我有一些文本使用GWT HTML對象顯示在網頁中。該文本包含一組特定的單詞。我想在用戶點擊時彈出一些內容（如果他將鼠標懸停在某個時間上，如果它很容易實現這些內容），則可以使用這些特殊字詞中的任何一個。

這是如何實現的？

請注意，我可以完全控制文本，並且可以根據需要在這些特殊字詞的周圍添加任何特定標籤。

Answer 1

從任何事件中，您都可以使用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）

Answer 2

您可以創建一個擴展Label並實現mouseListener的新類。

在onHover方法中，您創建一個新的PopupPanel。

一個很好的例子可以在這裏找到：

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

剛剛從你的HTML對象過濾這些話，使他們成爲你的新標籤類，並把它們放回面板。