Vaadin 23中如何避免Button点击触发外层Div的点击监听器？

在Vaadin 23中，点击内部Button时事件会通过DOM冒泡触发父Div的监听器，这和Vaadin 8里CssLayout搭配LayoutClickListener的行为不同。可以通过两种方式处理这个问题：

方式一：阻止Button的事件冒泡 #

在Button的点击监听器里调用event.stopPropagation()，直接切断事件向上传递的路径，避免触发父Div的监听器：

Button button = new Button();
button.addClickListener(event -> {
    // 执行Button的业务逻辑
    event.stopPropagation(); // 阻止事件冒泡到父元素
});

Div wrapper = new Div(button);
wrapper.addClickListener(event -> {
    // 执行Div的业务逻辑
});

方式二：在Div的监听器中过滤来自Button的事件 #

如果不想修改Button的逻辑，可以在Div的监听器里判断点击事件的原始目标是否属于Button，若是则跳过当前逻辑：

Button button = new Button();
button.addClickListener(event -> {
    // 执行Button的业务逻辑
});

Div wrapper = new Div(button);
wrapper.addClickListener(event -> {
    Element target = event.getOriginalEvent().getTarget();
    // 检查目标是否是Button本身或其子元素（比如Button内的图标、文本节点）
    if (target.equals(button.getElement()) || button.getElement().contains(target)) {
        return; // 忽略来自Button的点击
    }
    // 执行Div的业务逻辑
});

补充说明 #

Vaadin 8的LayoutClickListener内部做了特殊处理，会自动忽略子组件触发的点击事件；而Vaadin 23中Div使用的是标准DOM点击事件监听器，遵循事件冒泡机制，所以需要手动处理这种冲突。

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