如何为Vaadin中的Custom Notification添加外部点击监听器？

你的核心问题在于：所有点击监听器都绑定在CustomNotification自身组件上，完全无法捕获组件外部的点击事件。要实现点击外部自动关闭，需要监听页面全局点击或利用Vaadin底层Overlay的外部点击事件，以下是两种可行方案：

方案一：监听UI根元素全局点击（通用实现） #

修改CustomNotification的构造方法，给当前UI的根节点添加点击监听，通过判断点击目标是否属于当前Notification的DOM树来触发关闭：

public class CustomNotification extends Notification implements ClickNotifier<Notification> {

    private Registration clickOutsideRegistration;

    public CustomNotification(Component content) {
        Div contentWrapper = new Div(content);
        add(contentWrapper);
        
        setDuration(0);
        setPosition(Position.BOTTOM_END);

        UI currentUI = UI.getCurrent();
        if (currentUI != null) {
            // 给UI根元素添加点击监听，同时获取点击目标元素
            clickOutsideRegistration = currentUI.getElement()
                .addEventListener("click", event -> {
                    Element clickedElement = event.getEventDataElement("event.target");
                    // 点击元素不是当前Notification且不在其DOM树内时关闭
                    if (!getElement().equals(clickedElement) && !getElement().contains(clickedElement)) {
                        close();
                    }
                })
                .addEventData("event.target");
        }

        open();
    }

    @Override
    public void close() {
        super.close();
        // 关闭时移除监听器，避免内存泄漏
        if (clickOutsideRegistration != null) {
            clickOutsideRegistration.remove();
        }
    }

    public static CustomNotification showNotification(Component content) {
        return new CustomNotification(content);
    }
}

方案二：利用Vaadin Overlay的外部点击事件（更精准） #

Vaadin的Notification底层基于Overlay组件，直接监听Overlay的OutsideClickEvent可以更精准地捕获外部点击：

public class CustomNotification extends Notification implements ClickNotifier<Notification> {

    private Registration outsideClickRegistration;

    public CustomNotification(Component content) {
        Div contentWrapper = new Div(content);
        add(contentWrapper);
        
        setDuration(0);
        setPosition(Position.BOTTOM_END);

        // 延迟获取Overlay，Notification.open()后才会创建对应的Overlay实例
        UI.getCurrent().accessLater(() -> {
            Overlay overlay = getOverlay();
            if (overlay != null) {
                outsideClickRegistration = overlay.addOutsideClickListener(event -> close());
            }
        });

        open();
    }

    @Override
    public void close() {
        super.close();
        if (outsideClickRegistration != null) {
            outsideClickRegistration.remove();
        }
    }

    // 获取Notification对应的底层Overlay组件
    private Overlay getOverlay() {
        return getElement().getParent().getComponent().orElse(null);
    }

    public static CustomNotification showNotification(Component content) {
        return new CustomNotification(content);
    }
}

原有代码无效的原因 #

你之前添加的addClickListener和ComponentUtil.addListener都是监听CustomNotification自身的点击事件，只有点击组件内部区域才会触发。外部点击事件不会传递到这些监听器上，所以无论怎么判断event.getSource都不可能触发关闭逻辑。

使用时直接调用CustomNotification.showNotification(content)即可，无需额外添加监听器，点击外部区域会自动关闭通知。

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