Question

当用户点击页面中的任何位置而不是div时，我想要隐藏div。

<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
    $(document).not('.me').click(function () {
        $('.me').hide()
    })
})
</script>
</head>
<body>
<div class="me" style="width:200px; height:200px; background:#F00">
test
</div>
</body>

Answer 1

$(document).click(function (e)
{
    var container = $(".me");

    if (container.has(e.target).length === 0)
    {
        container.hide();
    }
});

Answer 2

您可以将点击事件添加到body或html元素，以及阻止点击事件在div元素上传播：

$(function () {
    //bye bye lovely div :)
    $('html, body').click(function(){
       $('.me').hide();
    });

    //let's avoid the click propagation to the body or html
    $('.me').click(function(e){
        e.stopPropagation();
     });
});

LIVING EXAMPLE

Answer 3

您可以使用stopPropagation()：

$(function(){
    $(document).click(function(){
       $(".me").hide();
    });
    $(".me").click(function(e){
       e.stopPropagation(); 
    });
});

选中此jsFiddle

Answer 4

您可以使用以下脚本来实现此目的。

 <script type="text/javascript">
        $(document).click(function (event) {
            var target = $(event.target);
            if (!target.parents().andSelf().is('.me')) {
                $(".me").hide();
            }
        });
 </script>

上面的语法是检查父项是否不是div（here it's me），而不是仅隐藏div。

快乐编码：）

Answer 5

$(function(){
    $(document).click(function(){
        $('.me').hide()
    })
    $('.me').click(function(){
        return false;
    })
})

单击外部任何位置时隐藏元素

5 个答案: