GWT sinkEvent 功能如何工作？

Question

我有一个用于测试的简单 GWT 设置：

<g:HTMLPanel ui:field="container" width="500px" height="300px">
    <g:Label ui:field="inner" text="hello"></g:Label>
</g:HTMLPanel>

添加了处理程序：

container.addDomHandler(new ClickHandler()
{
    @Override
    public void onClick(ClickEvent event)
    {
        Window.alert("click on container");
    }
}, ClickEvent.getType());

inner.addDomHandler(new ClickHandler()
{
    @Override
    public void onClick(ClickEvent event)
    {
        Window.alert("click on inner");
    }
}, ClickEvent.getType());

每个 addHandler 调用，正如我们从源代码中知道的那样，

DOM.sinkEvents(Element elem, int eventBits)

内部，后者，根据文档，“设置给定元素沉没的当前事件集。这些事件将被触发到元素的任何父元素上指定的最近的 {@link EventListener}。 "

但事实上，如果您点击内部 div，点击将通过以下 3 种方式中的任何一种触发到其父 div：

• 如果我没有在孩子上设置任何 ClickHandlers

• 如果我在子节点上设置了处理程序

• 如果我设置了处理程序，但是用

清除了 ClickEvent 的下沉

DOM.sinkEvents(inner.getElement(), DOM.getEventsSunk(getElement()) & ~Event.getTypeInt(ClickEvent.getType().getName()));

为什么会发生这种情况，沉没事件的真正作用是什么？ 为什么添加 Handler 与接收事件有关，即向给定元素的父级触发相同的事件？ 是否可以阻止所有添加到给定小部件的处理程序调用而不显式删除它们？ IE。有没有办法停止处理某些小部件上的所有事件？

Answer 1

首先，sinkEvent 是关于在元素上添加本机事件处理程序，如 GWT wiki 中所述。

您看到的是事件冒泡，这就是事件在浏览器中的工作方式：调度事件有两个阶段：捕获阶段（未在旧 IE 中实现）允许任何祖先元素在事件到达之前捕获事件它的目标，然后在冒泡阶段，事件冒泡 DOM 层次结构。因此，如果您在HTMLPanel 上监听点击，您还将收到来自Label 的冒泡点击事件。

您可以通过在Label 级别监听事件并调用stopPropagation() 来防止这种情况发生，这样它就不会冒泡到HTMLPanel。