Question

<body>
    <div id="aaa">
       <div id="bbb">
       </div>
    </div>
</body>


$(#?????).click(function(){

     $('#bbb').hide();

})

http://jsfiddle.net/GkRY2/

如果我想隐藏#bbb，如果用户点击#bbb框外，我必须使用什么？但是，如果我点击div #bbb，那么框仍然可见 - 只在外面。

Answer 1

 $('body').click(function(e){
       if( e.target.id == 'bbb' )
          { return true; }
       else
          { $('#bbb').hide(); }

 });

解释说明：有几种方法可以做到这一点，无论是我们需要监听父元素上的点击，还是像#aaa这样的直接父母，或像{body这样的远程父母。 {1}}或document。这样，我们就可以捕获#bbb之外发生的点击。

现在我们已经知道，如果用户在.hide内点击，我们就不会发生#bbb。我们可以通过两种方式做到这一点

如果用户点击#bbb，则停止传播。这会使点击事件不是 'bubble' 直到父级。这样，click事件永远不会到达父级，因此#bbb将不会隐藏。我个人不喜欢这种方法，因为停止传播将使所有点击事件都冒泡，并且您可能有点击事件，您想要冒泡到本地父级而不是远程父级。或者你可能有来自远程父母的听众，如果点击传播停止，它将停止工作。
检查父侦听器中的#bbb元素。这是上面显示的方法。基本上，这会侦听远程父级，当发生单击时，它会检查该单击是否在#bbb上。如果它不在#bbb .hide被触发，否则返回true，因此可能与click事件相关的其他事情将继续有效。出于这个原因，我更喜欢这种方法，但其次更容易阅读和理解。

最后，您检查点击来自#bbb的方式是否有很多选项。任何人都会工作，这种模式是这件事的真正含义。

http://jsfiddle.net/tpBq4/ //来自@Raminson的修改，他的答案非常相似。

新建议，在没有jQuery的情况下利用事件冒泡。

var isOutSide = true
    bbb       = documment.getElementById('bbb');
document.body.addEventListener('click', function(){
   if(!isOutSide){
       bbb.style.display = 'none';
   }
   isOutSide = true;
});

bbb.addEventListener('click', function(){
   isOutSide = false;
});

Answer 2

抓住click事件，因为它冒泡到document元素。当它到达document元素时，隐藏元素。然后在元素的click事件处理程序中，停止事件的传播，使其无法到达document元素：

$(function () {
    $(document).on('click', function () {
        $('#bbb').hide();
    });
    $('#bbb').on('click', function (event) {
        event.stopPropagation();
    });
});

以下是演示：http://jsfiddle.net/KVXNL/

event.stopPropagation()的文档：http://api.jquery.com/event.stopPropagation/

Answer 3

我制作了一个执行此操作的插件。它会保留this的值，而其他解决方案的this值将引用document。

https://github.com/tylercrompton/clickOut

使用：

$('#bbb').clickOut(function () {
    $(this).hide();
});

Answer 4

您可以使用事件对象的target属性，请尝试以下操作：

$(document).click(function(e) {
    if (e.target.id != 'bbb') { 
          $('#bbb').hide();
    }
})

DEMO

Answer 5

这将有效

$("#aaa").click(function(){

     $('#bbb').hide();

});

$("#bbb").click(function(event){

    event.stopPropagation();
})

Becouse bbb 位于 aaa 内，该事件将“bubbel up to aaa ”。因此，当点击 bbb 时，您必须使用event.stopPropagation停止冒泡

http://jsfiddle.net/GkRY2/5/

Answer 6

行

* 这不是jquery。您可以轻松修改它以使用IE

首先创建帮助方法以便于编码，不要与JQuery $（）

混淆

    function $g(element) {

    return document.getElementById(element);

    }

创建我们的监听器类

  function globalClickEventListener(obj){

    this.fire = function(event){
        obj.onOutSideClick(event);
        }
    }

假设我们需要捕获文档正文的每次点击

所以我们需要创建监听器数组并初始化我们的工作。此方法将在加载时调用

      function initialize(){

    // $g('body') will return reference to our document body. parameter 'body' is the id of our document body

    $g('body').globalClickEventListeners = new Array();
    $g('body').addGlobalClickEventListener = function (listener)
    {
        $g('body').globalClickEventListeners.push(listener);

    }

    //  capture onclick event on document body and inform all listeners

    $g('body').onclick = function(event) {
        for(var i =0;i < $g('body').globalClickEventListeners.length; i++){
            $g('body').globalClickEventListeners[i].fire(event);
        }
    }

}

初始化后，我们创建事件监听器并传递需要知道文档上每个clcik的对象的引用

    function goListening(){

        var icanSeeEveryClick = $g('myid');
        var lsnr = new globalClickEventListener(icanSeeEveryClick);

       // add our listener to listeners array   

        $g('body').addGlobalClickEventListener(lsnr);

       // add event handling method to div   

        icanSeeEveryClick.onOutSideClick = function (event){
             alert('Element with id : ' + event.target.id + ' has been clicked');
        }

    }

* 考虑文档正文的高度和宽度

* 在您不需要时删除事件侦听器

Answer 7

$(document).click(function(event) { 
    if(!$(event.target).closest('#elementId').length) {
        if($('#elementId').is(":visible")) {
            $('#elementId').hide('fast');
        }
    }        
})

更改＆＃34;＃elementId＆＃34;和你的div。

点击DIV外面

7 个答案: