我正在尝试在<li>
内的锚元素上接收一个事件,并且<li>
上的侦听器工作正常,但不适用于任何其他元素的锚。
它仅在FireFox
上起作用的奇怪的事情
html输出类似于:
<li>
Some Text
</li>
<li>
Some Text<a class='myClass'>Anchor</a>
</li>
侦听器的JAVA代码
this.eventListener = new EventListener() {
@Override
public void onBrowserEvent(Event e) {
Element elem = e.getTarget();
//This means we want to use the option selection
switch (e.getTypeInt()) {
case Event.ONCLICK:
if (LIElement.is(elem) && !elem.hasClassName('myClass')) {
selectOption((LIElement) elem);
} else {
LIElement li = (LIElement) elem.getParentElement();
createContact(li);
}
break;
case Event.ONMOUSEOVER:
//do something
break;
case Event.ONMOUSEOUT:
//do something
break;
}
}//End of onBrowserEvent
};//End of event listener
我正在使用它来创建元素:
LIElement li = Document.get().createLIElement();
AnchorElement createContactLI = Document.get().createAnchorElement();
createContactLI.addClassName(NEW_CONTACT_CLASS);
createContactLI.setInnerText("Add new contact");
createContactLI.setId("myID");
li.appendChild(createContactLI);
ulPanel.appendChild(li);
这可以沉没事件:
Event.sinkEvents(ulPanel, Event.ONCLICK | Event.ONMOUSEOVER | Event.ONMOUSEOUT);
Event.setEventListener(ulPanel, this.eventListener);`
我尝试了什么
下沉了锚事件,DID NOT WOK
将anchorElement包装在anchor中,并添加了ClickHandler,没有用
将anchorElement转换为liElement,不起作用
在处理anchorElement时不会触发BTW断点
还尝试了CSS和z-indexing,没有用
我要做什么
-将整个功能编写为小部件,这将花费我很长时间
非常感谢您的帮助
最佳答案
代替使用com.google.gwt.user.client.Element
,使用com.google.gwt.dom.client.Element
。我不知道您要将ulPanel
确切地添加到哪里。但是以下代码有效:
import com.google.gwt.dom.client.AnchorElement;
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.EventTarget;
import com.google.gwt.dom.client.LIElement;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.EventListener;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.VerticalPanel;
public class CustomWidget extends VerticalPanel{
public CustomWidget() {
DivElement ulPanel = Document.get().createDivElement();
LIElement li = Document.get().createLIElement();
AnchorElement createContactLI = Document.get().createAnchorElement();
createContactLI.addClassName("myclass");
createContactLI.setInnerText("Add new contact");
createContactLI.setId("myID");
li.appendChild(createContactLI);
ulPanel.appendChild(li);
Event.sinkEvents(ulPanel, Event.ONCLICK | Event.ONMOUSEOVER | Event.ONMOUSEOUT);
Event.setEventListener(ulPanel, this.eventListener);
this.getElement().appendChild(ulPanel);
}
EventListener eventListener = new EventListener() {
@Override
public void onBrowserEvent(Event e) {
//This means we want to use the option selection
switch (e.getTypeInt()) {
case Event.ONCLICK:
EventTarget eventTarget = e.getEventTarget();
Element elem = Element.as(eventTarget);
if (AnchorElement.is(elem) && "myclass".equals(elem.getAttribute("class"))) {
Window.alert("clicked anchor element");
} else {
LIElement li = (LIElement) elem.getParentElement();
Window.alert("clicked li element");
}
break;
case Event.ONMOUSEOVER:
//do something
break;
case Event.ONMOUSEOUT:
//do something
break;
}
}//End of onBrowserEvent
};//End of event listener
}