在显示复杂 HTML 的 GWT HTML 小部件中，如何为特定子元素添加事件处理程序？

Question

我正在优化一个 GWT 应用程序，该应用程序以前使用各种嵌套面板来处理 DIV 和 Span。我将整个表格生成为单个 SafeHtml 对象，然后将其分配给单个 SafeHtml 小部件。

我现在希望能够在特定的“单元格”范围而不是整个表格的级别上跟踪鼠标悬停/鼠标悬停事件，但我不确定如何做到这一点。

如果我向 HTML 小部件本身添加一个处理程序，我将获得源自各种元素的事件。

Answer 1

从 2.0 开始，有一种非常简单的方法可以做到这一点。 例如，如果您的 HTML 代码包含在某种小部件（HTMLPanel 或 HTML）中，您可以在该小部件上调用addDomHandler(<handler>,<eventtyoe>)，因此您将接收来自内部 html 的事件。 例如，如果您在 HTMLPanel 中有一堆锚点，并且您想知道点击了哪个锚点，您可以执行以下操作：

panel.addDomHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            Element element=  event.getNativeEvent().getEventTarget().cast();
            if(element.getTagName().equals("A")) {
                AnchorElement anchor = element.cast();
                Window.alert("Anchor with href " + anchor.getHref() + " was clicked");
            }

        }
    }, ClickEvent.getType());

由于您要跟踪 mouseover/out 事件，您将不得不使用 2 个不同的 dom 处理程序，在事件触发时找出您需要的单元格，然后更改其状态。

Answer 2

解决方法是：

• 使用一种 DOM 方法（如 DOM.getElementById(..) 或任何其他方式）找到您需要的元素。查看Widget.getElement()等。
• 调用DOOM.sinkEvents(element,eventBits) 或DOM.sinkBitlessEvent(element,eventName) 并以位掩码的形式传递所需的事件，如Event.MOUSEEVENTS 或使用命名事件，如click 或touchstart，如果使用第二种方法。

• 在元素上设置和 EventListener，通过调用 DOM.setEventListerner(element,eventListener) 像这样：

  DOM.setEventListener( element, new EventListener()
  {
  
      @Override
      public void onBrowserEvent( Event event )
      {
          if ("click".event.getType()) {
             // ..do stuff..
          }
      }
  } );
  

只有您在第 2 步中指定的事件才会被触发到您的 EventListener，因此您只需要处理这些事件。