グローバルセレクタを使用して、1つの要素を除くすべてのクリックイベントに応答するにはどうすればよいですか？

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 =「ボタン1」と1を除く、全てのbutton要素にマッチします。

あなたが本当に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要素です。

イベントリスナーをルートに添付し、どの要素がクリックを受信したかを確認できます。それが戻り値を無視したい要素なら、それ以外の場合は何をしたいのかを行います。