ボタンがある場合:
<button id="button1">
通常、私は次のように書きます。
$("#button1").click(function ()
{
//do something
}
しかし、誰かがこのボタンをクリックした場合を除いて、すべてのクリックイベントに応答する関数を定義したいと思います。
ドキュメント内の他のすべてのクリック可能な要素をターゲットにすることができるセレクターはありbutton1
ますか?
ボタンがある場合:
<button id="button1">
通常、私は次のように書きます。
$("#button1").click(function ()
{
//do something
}
しかし、誰かがこのボタンをクリックした場合を除いて、すべてのクリックイベントに応答する関数を定義したいと思います。
ドキュメント内の他のすべてのクリック可能な要素をターゲットにすることができるセレクターはありbutton1
ますか?
: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関数で処理できます。
あなたが上記の答えを受け入れたことは知っていますが、私はこれに強く反対することをお勧めします。イベント委任を使用して、domへのオーバーヘッドを大幅に削減して必要な処理を実行できます。
.live()が存在することは知っていますが、ライブハンドラーが多すぎるとパフォーマンスにも影響します。私はイベント委任の古いスタイルが好きです。
こちらのデモ
$(function(){
$('body').click( clickFn );
});
function clickFn( ev ) {
if (ev.target.id != 'button1' ){
//do your stuff
console.log('not a #button1 click');
}
}
現在のCSS3Selectors Candidate Recommendationは、:root
pseuedoクラスを定義しています。
:root
疑似クラスは、ドキュメントのルートである要素を表します。HTML 4では、これは常にHTML
要素です。
イベントリスナーをルートにアタッチしてから、クリックを受け取った要素を確認できます。それがreturnを無視したい要素である場合、それ以外の場合は、やりたいことを何でもします。