在HTML块中的特定单词上收听鼠标事件
我有一些文本使用GWT HTML对象显示在网页中。该文本包含一组特定的单词。我想在用户点击时弹出一些内容(如果他将鼠标悬停在某个时间上,如果它很容易实现这些内容),则可以使用这些特殊字词中的任何一个。在HTML块中的特定单词上收听鼠标事件
这是如何实现的?
请注意,我可以完全控制文本,并且可以根据需要在这些特殊字词的周围添加任何特定标签。
从任何事件中,您都可以使用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)
您可以创建一个扩展Label并实现mouseListener的新类。
在onHover方法中,您创建一个新的PopupPanel。
一个很好的例子可以在这里找到:
http://examples.roughian.com/index.htm#Listeners~MouseListener
刚刚从你的HTML对象过滤这些话,使他们成为你的新标签类,并把它们放回面板。
-1使用监听器,因为它们是在很久以前弃用。另外,当你将一个标签放入代码中时,它会插入一个div或者换句话说就会创建一个新行。 –
好的,你打败了我。现在我可以删除我还没有发布的答案;-) –