Why gwt event bubbling doesn't work?

问题

I have a custom widget with a constructor body like this

  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");
        }
    });

   }

and it produces html like this

<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>

when I click the canvas I get two alerts "canvas click" and "Bubble click" but no "Container click".

Why ?

回答1:

When you add your widget its onAttach() method is called. If you check the source of this method you will notice it redefines the event listener for browser events to be the widget by DOM.setEventListener(getElement(), this). And according to javadocs of this function only one such listener may exist for a single element. Since your containerDiv is returned by getElement() of widget, the onBrowserEvent you have defined for your element is replaced by the default onBrowserEvent implementation of the widget. That is why the Window.alert() is never called

来源：https://stackoverflow.com/questions/7486137/why-gwt-event-bubbling-doesnt-work

标签

javascript

gwt

event-handling