jQuery的绑定点击* ANYTHING * *，但* ELEMENTjQuery的绑定点击* A

说，有一些元素左右浮动，我试图做一些当我点击任何东西（div的，身体，无论...），但指定的（例如＃DIV特殊）。

我不知道是否有更好的方法来实现这一目标，除了下面的方法我能想到的...

$(document).bind('click', function(e) {
    get mouse position x, y
    get the element (div#special in this case) position x, y
    get the element width and height
    determine if the mouse is inside the element
    if(inside)
        do nothing
    else
        do something
});

Answer 1:

为了处理“这样做单击此元素时除外 ”情况，一般的做法是将事件处理程序添加到document它处理“做”的情况下，再加入另一个事件处理程序“除了这个”元素，简单地阻止了click事件冒泡的document ;

$('#special').on('click', function(e) {
    e.stopPropagation();
});

$(document).on('click', function (e) {
 // Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.
});

见的event.stopPropagation()文档 。 对于那些使用版本早于jQuery的1.7（因为是当有人问这个问题的情况下），你将无法使用on() ; 代替简单的替换2种的用途on()与bind() ; 在这种情况下，签名是一样的。

演示在这里; http://jsfiddle.net/HBbVC/

Answer 2:

你也可以做

$(document).bind('click', function(e) {
  if(!$(e.target).is('#special')) {
    // do something
  }
});

或者，如果格＃特别有子元素，你可以这样做

$(document).bind('click', function(e) {
  if($(e.target).closest('#special').length === 0) {
    // do something
  }
});

Answer 3:

我已经做了这样的过去：

jQuery("body").bind("click", function(e)
{
    var obj = (e.target ? e.target : e.srcElement);
    if (obj.tagName != 'div' && obj.id != 'special')
    {
        // Perform your click action. 
        return false;
    }
});

如果你没有对DIV＃特殊点击这将只执行。 老实说，可能有更好的方法来做到这一点，但是这很适合我。

Answer 4:

你需要做的不同的结合，没有必要处理这一切都点击了一个功能

$('body').bind('click', function(e){
  bodyClickEvent();
});
$('div.floating').bind('click',function(e){
  elementClickEvent(this);
  e.stopPropagation(); //prevents bodyClickEvent
});
  $('div#special').bind('click', function(){
  e.stopPropagation(); //prevents bodyClickEvent
});

Answer 5:

我今天这个写了我有，因为我不喜欢绑定到文件的全部时间有点击的事件，所以对于我的情况下工作的，使用回调从功能的问题。

$('#button').click(function(){
        //when the notification icon is clicked open the menu
        $('#menu').slideToggle('slow', function(){
            //then bind the close event to html so it closes when you mouse off it.
            $('html').bind('click', function(e){
                $('#menu').slideToggle('slow', function(){
                    //once html has been clicked and the menu has closed, unbind the html click so nothing else has to lag up
                    $('html').unbind('click');
                });
            });
            $('#menu').bind('click', function(e){
                //as when we click inside the menu it bubbles up and closes the menu when it hits html we have to stop the propagation while its open
                e.stopPropagation();
                //once propagation has been successful! and not letting the menu open/close we can unbind this as we dont need it!
                $('#menu').unbind('click');
            });
        });
    });

文章来源: jQuery bind click *ANYTHING* but *ELEMENT*