javascript - 为什么 gwt 事件冒泡不起作用？

Question

我有一个像这样的构造函数体的自定义小部件

  public MyWidget() {

            this.containerDiv = DOM.createDiv();
            this.containerDiv.getStyle().setPosition(Position.ABSOLUTE);
    this.containerDiv.getStyle().setLeft(20, Style.Unit.PX);
    this.containerDiv.getStyle().setTop(20, Style.Unit.PX);
    this.containerDiv.getStyle().setWidth(50, Style.Unit.PX);
    this.containerDiv.getStyle().setHeight(20, Style.Unit.PX);

    final Element canvasContainer = DOM.createDiv();
    canvasContainer.getStyle().setPosition(Position.ABSOLUTE);
    canvasContainer.getStyle().setLeft(0, Style.Unit.PX);
    canvasContainer.getStyle().setTop(0, Style.Unit.PX);
    canvasContainer.getStyle().setBottom(0, Style.Unit.PX);
    canvasContainer.getStyle().setRight(20, Style.Unit.PX);

            this.canvas = DOM.createCanvas();
    this.canvas.getStyle().setWidth(100, Unit.PCT);
    this.canvas.getStyle().setHeight(100, Unit.PCT);

    canvasContainer.appendChild(this.canvas);
    this.containerDiv.appendChild(canvasContainer);

    setElement(this.containerDiv);

    DOM.sinkEvents((Element) this.canvas.cast(), Event.ONCLICK);
    DOM.setEventListener((Element) this.canvas.cast(), new EventListener() {
        @Override
        public void onBrowserEvent(final Event event) {

            Window.alert("canvas  click");
        }
    });

    DOM.sinkEvents((Element) canvasContainer.cast(), Event.ONCLICK);
    DOM.setEventListener(canvasContainer, new EventListener() {
        @Override
        public void onBrowserEvent(final Event event) {

            Window.alert("Bubble click");
        }
    });
    DOM.sinkEvents((Element) this.containerDiv.cast(), Event.ONCLICK);
    DOM.setEventListener(this.containerDiv, new EventListener() {
        @Override
        public void onBrowserEvent(final Event event) {

            Window.alert("Container click");
        }
    });

   }

它会生成这样的 html

<div style="position: absolute; left: 20px; top: 20px; width: 50px; height: 20px; ">
  <div style="position: absolute; left: 0px; top: 0px; bottom: 0px; right: 20px; ">
    <canvas style="width: 100%; height: 100%; "/>
  </div>
</div>

当我点击 Canvas 时，我收到两个警报“ Canvas 点击”和“气泡点击”，但没有“容器点击”。

为什么？

Answer 1

当您添加小部件时，将调用其 onAttach() 方法。如果您检查此方法的源代码，您会注意到它通过 DOM.setEventListener(getElement(), this) 将浏览器事件的事件监听器重新定义为小部件。根据此函数的 javadocs，单个元素可能只存在一个这样的监听器。由于您的 containerDiv 是由小部件的 getElement() 返回的，因此您为元素定义的 onBrowserEvent 将替换为小部件的默认 onBrowserEvent 实现。这就是为什么永远不会调用 Window.alert()