jquery 单击除 div 和子项之外的任何内容

Question

我有一个登录窗口，我试图通过单击 div 以外的任何位置来淡出（以及切换淡入和淡出的登录按钮）

 jQuery(document).ready(function ($) {
    $('.login').click(function () {
        $('#modal_login').fadeToggle('fast');
    });

    $('body').click(function (e) {
        if (!$(e.target).is('.login, #modal_login *')) {
            $('#modal_login').fadeOut('fast');
        }
    });
});

这一切看起来都很简单，但我的问题是#modal_login 和它的孩子。如果您单击#modal_login div 中的任意位置，它会淡出。我也试过#modal_login > *，但没有成功。

代码运行良好，带有“.login”类按钮。

所以我的问题是，我什至使用正确的语法来完成我想要完成的事情（当点击或点击它的任何孩子时不会让 div 淡出）？看起来合法吗？

Answer 1

解决此问题的一种方法是防止模态框内的点击冒泡超出模态框。像这样的：

$("#modal_login").click(function(e){
    e.stopPropagation();
});

现在模态中的点击不会冒泡到执行fadeOut的外部处理程序。