Question

的jQuery

$(".window-container").click(function() {
    $(this).fadeOut("fast");
});

HTML

<div class="window-container">
    <div class="window-wrap">
        <div class="window-content">
             asdf
        </div>
    </div>
</div>

我有一个链接使window-container和每个子div出现。（就像Facebook弹出窗口一样）

要关闭window-container，我希望能够点击除window-content div之外的任何地方。因为如果我在其中包含输入，并且我专注于它，它将关闭所有内容。

那么，如果用户点击window-container或window-wrap div，我该怎么办？

Answer 1

只需检查event.target即可确保click事件来自div.window-container或div.window-wrap。

$(".window-container").click(function(e)
{
    if ($(e.target).is('div.window-container, div.window-wrap'))
    {
        $(this).fadeOut("fast");
    }
});

可替换地：

$(".window-container").click(function(e)
{
    if ($(e.target).has('div.window-content').length)
    {
        $(this).fadeOut("fast");
    }
});

Answer 2

最好的方法是在.window-content元素内部启动时，停止事件的传播（ event.stopPropagation() ）。

$('.window-content').click(function(e){
   e.stopPropagation();
});

这样点击事件永远不会到达.window-container元素。

Answer 3

$(".window-container").click(function (e) {
        $(this).fadeOut("fast");
        e.stopPropagation();
    });
    $(".window-wrap, .window-content").click(function (e) {
        $(".window-container").css("display", "block !important");
        e.stopPropagation();
    });

    $("body").click(function () {
        $(".window-container").fadeOut("fast");
    });

jQuery：fadeOut仅在单击父div时

3 个答案: