javascript - 如何使用全局选择器来响应除一个元素之外的所有点击事件？

Question

如果我有一个按钮：

<button id="button1">

通常我会写：

$("#button1").click(function ()
{    
    //do something
}

但我想定义一个响应所有点击事件的函数，除非有人点击这个按钮。

是否有一个选择器可以让我定位文档中除 之外的所有其他可点击元素button1？

Answer 1

您可以使用:not 选择器：

$('button:not(#button1)').click(function(){
  //Do something
});

上面的选择器将匹配所有的按钮元素，除了 id = "button1" 的那个。

如果你真的想选择 body 标签下的所有元素，你可以使用"All" ( *) 选择器，也可以用:not(selector)或.not(expr)排除元素：

$('body *:not(#button1)').click(function(){
  //Do something
});

或者

$('body *').not('#button1').click(function(){
  //Do something
});

如果这样做，您可能会遇到一些事件冒泡或传播问题，您可以使用event.stopPropagation函数来处理这个问题。

Answer 2

我知道你已经接受了上面的答案，但我强烈反对这一点。您可以使用事件委托来做您想做的事，而对 dom 的开销要少得多。

我知道 .live() 存在，但太多的实时处理程序也会影响性能。我更喜欢事件委托旧式。

演示在这里

$(function(){
    $('body').click( clickFn );
  });

  function clickFn( ev ) {

    if (ev.target.id != 'button1' ){
       //do your stuff
       console.log('not a #button1 click');
    }

  }

Answer 3

当前的 CSS 3 Selectors Candidate Recommendation 定义了:root伪类。

:root伪类表示作为文档根的元素。在 HTML 4 中，这始终是HTML元素。

您可以将事件侦听器附加到根，然后检查哪个元素收到了点击。如果它是你想要忽略的元素返回，否则做你想做的任何事情。