为什么 gwt 事件冒泡不起作用？
我有一个带有这样的构造函数主体的自定义小部件
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>
，当我单击画布时，
我收到两个警报“画布单击”和“气泡单击”，但没有“容器单击”。为什么 ？
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 ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
当您添加小部件时，将调用其
onAttach()方法。如果您检查此方法的源代码，您会发现它通过 DOM.setEventListener(getElement(), this) 重新定义了浏览器事件的事件侦听器作为小部件。根据该函数的 javadoc，单个元素只能存在一个这样的侦听器。由于您的containerDiv是由小部件的getElement()返回的，因此您为元素定义的onBrowserEvent将被小部件的默认onBrowserEvent实现替换。这就是为什么Window.alert()永远不会被调用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 byDOM.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 bygetElement()of widget, the onBrowserEvent you have defined for your element is replaced by the default onBrowserEvent implementation of the widget. That is why theWindow.alert()is never called