Question

我有一个div，我想设置它，这样当我点击其他内容时，它会隐藏div。

所以我做了

$('body').click(function(){
    if(loginOpened)
    {
        $('#loginWindow').animate({
            'width':'0px',
            'height':'0px'
        },"fast");
    }
    loginOpened=false;
});

然而，即使我点击div本身事件被触发，反正有没有阻止这个？

Answer 1

您可以使用

停止它

e.stopPropagation();如果点击事件绑定到<div />标记。

参见 event.stopPropagation()

防止事件冒泡 DOM树，阻止任何父处理者被通知事件

否则你可以检查身体内部事件的目标点击。检查event.target是否与您的div相同。

参见 event.target

Answer 2

只需检查event.target即可。如果触发事件的元素是div，则不执行代码。

$('body').click(function(evt){
    evt = evt || window.event
    if ($(evt.target) != $('#loginWindow')) {
      if(loginOpened)
      {
          $('#loginWindow').animate({
              'width':'0px',
              'height':'0px'
          },"fast");
      }
      loginOpened=false;
    }
});

Answer 3

是的，但当然微软和世界其他地方对如何做到这一点得出了不同的结论。该网站提供了所需内容的清晰概述：http://www.quirksmode.org/js/events_order.html。

我不使用jQuery，但jQuery方式似乎是event.stopImmediatePropagation();，如此问题所示：jQuery Multiple Event Handlers - How to Cancel?。

Answer 4

John的代码中的一些变化：

$('body').click(function(ev){
    // jQuery means never having to say "window.event"!
    // Also, code's cleaner and faster if you don't branch, 
    // and choose simple breaks over more complex ones
    if(!loginOpened) return;
    // Lastly, compare using the DOM element; 
    // jQuery objects never compare as the "same"*
    if (ev.target == $('#loginWindow').get(0)) return;  
    $('#loginWindow').animate({
        'width':'0px',
        'height':'0px'
    },"fast");
    loginOpened=false;
});

如果在body事件中捕获它不适合你，你可以只为div添加一个简单的事件处理程序：

$('#loginWindow').click(function (ev) { ev.stopPropagation(); });

我会说返回false，但这会阻止其他事情触发div。 stopPropagation只是让事件不会向外冒泡。

当然，我真的很挑剔......

//Delegation via the document element permits you to bind the event before
// the DOM is complete; no flashes of unbehaviored content
$(document).delegate('body', 'click', function(ev){
    //You only have one instance of an id per page, right?
    if(!loginOpened || ev.target.id == 'loginWindow') return;
    //quotes and px?  not necessary.  This isn't json, and jQ's smart
    $('#loginWindow').animate({width:0,height:0},"fast");
    loginOpened=false;
});

*不相信我？试试：

jQuery('#notify-container') == jQuery('#notify-container')

然后尝试

jQuery('#notify-container').get(0) == jQuery('#notify-container').get(0)

单击div触发绑定$（'body'）。单击

4 个答案: