jQuery绑定单击*任何*，但*元素*

假设有一些元素在浮动，当我单击除指定的元素（例如div＃special）以外的任何内容（divs，body等）时，我正在尝试执行一些操作。

我想知道除了以下我能想到的方法之外，还有没有更好的方法来实现这一目标...

$(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
});

要处理“除了单击此元素时执行此操作”情况，一般的方法是在上添加一个事件处理程序，以document处理“执行此操作”的情况，然后向“ except this”元素添加另一个事件处理程序，防止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/

你也可以

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

或者，如果div＃special具有子元素，则可以执行

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

过去我是这样做的：

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＃special时才会执行。老实说，也许有更好的方法可以这样做，但这对我有用。

您需要进行不同的绑定，因此无需在一个函数中处理所有这些单击

$('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
});

我今天写这篇文章是为了解决我遇到的一个问题，因为我不喜欢一直将单击事件绑定到文档，因此对于我的情况，使用函数的回调是可行的。

$('#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');
            });
        });
    });

我曾经比其他答案更轻松地解决了此问题，但不必担心点击确实会落在DOM-Tree上

只需检查您的元素是否悬停;）

$(document).on('click', function (e) {

  if($('#special:hover').length > 0){
    // on our special element
  }else{
    // not on our special element
  }

});

干杯