如何使用全局選擇器來響應除一個元素之外的所有點擊事件？

Question

如果我有一個按鈕：

<button id="button1"> 

通常我會寫：

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

但我想定義響應所有點擊事件功能除了當有人點擊這個按鈕。

是否有一個選擇器可以讓我定位文檔中除button1之外的所有其他可點擊元素？

Answer 1

我知道你已經接受了上面的答案，但我會建議強烈反對。 你可以使用事件委託來完成你想要的任務，並且使dom的開銷減少很多。

我知道.live（）存在，但太多活動處理程序也會影響性能。我更喜歡活動代表團的舊風格。

演示here

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

    function clickFn(ev) { 

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

    } 

Answer 2

您可以使用:not selector：

$('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 3

當前的CSS 3選擇器候選建議書定義了:root pseuedo class。

:root僞類代表一個元素，它是文檔的根。在HTML 4中，這始終是HTML元素。

您可以將一個事件偵聽器附加到根，然後檢查哪個元素收到了點擊。如果這是你想忽略回報的元素，否則做你想做的事情。