Question

我正在尝试在<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包装在锚点中并添加了ClickHandler，但没有工作
将anchorElement转换为liElement，而不是
处理anchorElement
还尝试了CSS和z-indexing，Didn没有工作

我要做什么 - 将整个功能写为小部件，这将花费我很长时间

真的非常感谢你的帮助

Answer 1

而不是使用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 

}

Answer 2

尝试在onLoad（）小部件生命周期方法中初始化代码。

@Override
      protected void onLoad() {
    radioButton = DOM.getElementById("radio_green_id_1").cast();
    radioButton.setId(DOM.createUniqueId());

Event.sinkEvents(ulPanel, Event.ONCLICK | Event.ONMOUSEOVER | Event.ONMOUSEOUT);
Event.setEventListener(ulPanel, this.eventListener);

      }

除了在Firefox上，GWT SinkEvent无法正常工作

2 个答案: