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

假设有一些元素在浮动，当我点击任何东西（div，body，随便什么…）时，我会尝试做一些，但指定的元素除外（例如div#special）

我想知道除了下面的方法之外，是否还有更好的方法来实现这一点

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

要处理“除单击此元素外执行此操作”的情况，一般方法是向处理“执行此操作”情况的

文档

添加一个事件处理程序，然后向“除此之外”元素添加另一个事件处理程序，这只会防止单击事件冒泡到

文档

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

看。对于那些使用jQuery1.7之前版本的用户（当提出这个问题时就是这样），您将无法在（）上使用

on

；而是简单地用替换的2个用途；这种情况下的签名是相同的

---

在这里演示

我过去也这样做过：

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

---

我今天写这篇文章是为了解决我遇到的一个问题，因为我不喜欢一直将click事件绑定到文档，所以对于我的场景，这是可行的，使用函数的回调

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

你也可以这样做

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

---

我曾经比其他答案更容易解决这个问题，但我并不在意点击是否真的会进入DOM树

只需检查元素是否悬停；）

---

干杯

可能重复的

$（'：not（div#special））.bind（'click'，函数（e）{…

？@JimSchubert:应该可以，我会把它作为一个答案发布-它比可能的副本中的答案更简单。但是，它似乎效率不高。@Wesley:但它不正确。事件处理程序还将绑定到

div#special

中的元素。@Jim:

：not（div#special，div#special*）

是正确的。但是，我会避免将事件处理程序绑定到每个元素。在这种情况下，利用事件委派会更好。您不需要测试

e.target

。它将始终存在，jQuery会规范化事件对象。如果

div#special

包含其他元素，它将不起作用。无意冒犯，但是这与我链接到的副本中给出的答案基本相同：@Felix:我现在可以看到，但当我开始写回复时，你还没有发表评论：（.在mobile Safari上似乎不起作用，尽管我在其他任何地方都没有问题。您的回答与Hugo Silva在此处的回答相结合，解决了我在Safari上的特定问题。mobile不总是允许在非锚上进行“点击”操作，所以您似乎必须对其进行定义（有关正确的解释，请参阅他的回答）：如果定义了针对其他元素的事件处理程序以防止冒泡，则这不起作用。这将导致这些元素被视为误报。Imho，更好/全面的解决方案是定义文档处理程序（按原样），但将其定义为在中激发，而不是冒泡阶段。您必须在所述处理程序中主动筛选要跳过/传递的元素。您可以忽略其他处理程序。

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

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

});