jquery - jquery - 在点击正文上隐藏 div

Question

我有一个通知 div，如果用户单击 .notification-popup 就会弹出。我正在尝试这样做，只要用户单击该 DIV 的一侧，popop div 就会隐藏。

目前我有这个：

$('body').on('click', function (e) {
                    $('.notification-list-wrapper').each(function () {
                        //the 'is' for buttons that trigger popups
                        //the 'has' for icons within a button that triggers a popup
                        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.notification-list-wrapper').has(e.target).length === 0) {
                            $(this).hide();
                        }
                    });
                });

尽管当我单击.notification-popup 时甚至没有任何反应。

我应该改变什么？

Answer 1

一种解决方案是防止从通知包装器传播单击事件并在任何其他单击时隐藏元素

$(document).on('click', function (e) {
    $wrapper.hide();
});
var $wrapper = $('.notification-list-wrapper').click(function (e) {
    e.stopPropagation()
})

另一个可能是测试点击是否发生在点击处理程序的包装内

$(document).on('click', function (e) {
    if ($(e.target).closest($wrapper).length == 0) {
        $wrapper.hide()
    }
});
var $wrapper = $('.notification-list-wrapper');