停止 Vaadin Flow 按钮的事件传播

Question

我有一个 Vaadin 23 应用程序，其中有一个

Div

元素，其中包含

Button

（以及其他内容），并添加了一个单击监听器以及按钮：

Button button = new Button();
button.addClickListener(event -> { ... });

Div wrapper = new Div(button);
wrapper.addClickListener(event -> { ... });

问题是单击按钮时两个侦听器都会触发。

在这种情况下，如何确保仅触发按钮单击侦听器？ 我希望当我单击

Div

内除按钮之外的任意位置时，触发

Div

上的单击侦听器。

或者，如果我可以在

Div

上的点击监听器中检测到点击实际上是在按钮上，我可以简单地忽略它。 但我也不知道该怎么做。

这是来自 Vaadin 8 应用程序的端口，它可以正常工作。 在这种情况下，包装纸

Div

是添加了

CssLayout

的

LayoutClickListener

。

Answer 1

将此功能添加到 Vaadin Flow 存在一个“高度投票”的问题。该问题中还描述了不同的解决方法。 就您而言，我认为解决方法如下：

button.getElement().addEventListener("click", ignore -> {}).addEventData("event.stopPropagation()");

或者从 Vaadin 24.2 开始，存在方便的 API，可以使解决方法更容易找到

button.getElement().addEventListener("click", ignore -> {}).stopPropagation();