为什么gwt事件冒泡不起作用？ [英] Why gwt event bubbling doesn't work?

问题描述

  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元素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点击）; 
} 
}）; 
 
 
 
 
 
 
 
它会产生像这样的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> 
  
当我点击画布时，我会看到两个提示画布点击和泡泡点击，但没有容器点击。
 
 
 
为什么？
解决方案
将调用它的 onAttach（）方法。如果你检查这个方法的源代码，你会注意到它重新定义了浏览器事件的事件监听器，它是由 DOM.setEventListener（getElement（），this）来实现的。根据这个函数的javadocs，只有一个这样的监听器可能存在于单个元素中。由于您的containerDiv由小部件的 getElement（）返回，因此您为元素定义的onBrowserEvent将由小部件的默认onBrowserEvent实现替换。这就是为什么 Window.alert（）永远不会被调用
 
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 ?
解决方案
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

                        
这篇关于为什么gwt事件冒泡不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！