为html元素添加单击处理程序?

时间:2010-05-04 21:02:40

标签: gwt

我有一个使用html为我预生成的页面,它看起来像一个可滚动的div列表,如:

<html>
  <div id="a">
     <div>Item A</div>
  </div>
  <div id="b">
     <div>Item B</div>
  </div>
</html>

我想在我的入口点方法中抓取它们,并为每个方法添加一个点击处理程序。我无法弄清楚如何做到这一点。我有类似的东西:

public void onModuleLoaded() {
    RootPanel rp1 = RootPanel.get("a");
    rp1.addClickHandler(...); // can't do this.
}

如何在GWT中点击其中一个项目?有没有办法我可以安装一个全局点击处理程序,只是查看点击项目的ID并过滤掉它?我不一定需要为每个元素添加一个单击处理程序(如果你有许多需要点击处理程序的元素,我认为文档建议不要这样做),

由于

由于

2 个答案:

答案 0 :(得分:3)

我没有对此进行测试,但总体思路是正确的,并且很容易扩展到多个目标元素。您可能希望事先存储DOM.getElementById()返回的元素以保持快速。请记住,将为每个用户事件调用onPreviewNativeEvent(),因此请保持清淡。

Event.addNativePreviewHandler(new NativePreviewHandler() {
    public void onPreviewNativeEvent(NativePreviewEvent event) {
        if (Event.as(event).getTypeInt() == Event.ONCLICK &&
            DOM.isOrHasChild(DOM.getElementById("A"), Element.as(event.getEventTarget()))) {
            // Element 'A' was clicked.
        }
    }
}

答案 1 :(得分:3)

使用wrap()的问题是,如果父元素已经是一个小部件,则不允许包装。您仍然可以执行此操作,但如果您在开发模式下运行应用程序,则断言将失败,从而停止应用程序。

正确的(但是乏味且在我看来不完整)方式就像是

Element elem = DOM.getElementById(“billing-component”);
DOM.sinkEvents(elem, Event.ONCLICK | Event.ONMOUSEOUT | Event.ONMOUSEOVER);
DOM.setEventListener(elem, new EventListener() {
    @Override
    public void onBrowserEvent(Event event) {
        if (Event.ONCLICK == event.getTypeInt()) {
            …
        }
    }
});

我知道看起来不太好,实际上并不是因为你只能将一个监听器附加到元素上并且必须检查事件类型。