如何排除CheckBox组件点击事件触发容器的click监听器？

在Qooxdoo中，事件会沿DOM树向上冒泡，因此点击容器内部的CheckBox时，事件会传递到父容器并触发其click监听器。只需给CheckBox添加click监听器，在其中阻止事件冒泡即可解决这个问题。

修改后的可运行代码 #

// 创建CheckBox
var button1 = new qx.ui.form.CheckBox();
const container = new qx.ui.container.Composite(new qx.ui.layout.Canvas);
container.setDecorator("main");
container.addListener("click", function(){
    console.log("aaaa");
}, this);
container.setWidth(50);
container.setHeight(50);

// 为CheckBox添加click监听器，阻止事件向上传播
button1.addListener("click", function(e) {
    e.stopPropagation();
}, this);

container.add(button1);

// 获取应用根节点
var doc = this.getRoot();

// 将容器添加到根节点指定位置
doc.add(container,
{
  left : 100,
  top  : 50
});

原理说明 #

• 调用事件对象的stopPropagation()方法，会终止事件在DOM树中的向上冒泡流程，父容器的click监听器就不会接收到该事件。
• 如果需要同时阻止CheckBox自身其他同类型监听器触发，可替换为e.stopImmediatePropagation()，但仅阻止冒泡到父容器的场景下，stopPropagation()已足够。

内容的提问来源于stack exchange，提问作者goldim