2011-05-27 5 views
16

私のページには、クリックイベントに応答するさまざまな要素がたくさんあります。 いくつかのグローバルフラグに基づいてすべてのクリックをブロックする必要がある場合があります。 中央の場所でこのチェックを行う方法はありますか?私はフラグをチェックし、各イベントでの今jQuery:すべてのクリックイベントが発生する前にトラップしますか?

は、例えば:私がやりたいのは何

var canClick = false; // Global flag 

// Sample click event: 
$("#someDiv").click(function(){ 
    if(!canClick) return; 

    // Some stuff ... 
}); 

前に、他の要素をすべてのクリックイベントをトラップ一つの要素を持っています。

文書でこれをやろうとしましたが、これらのイベントは他のクリックイベントの後にのみ発生します。

例:

$("#someDiv").click(function(){ console.log("someDiv click"); }); 

$(document).click(function(){ console.log("Document click"); }); 

// When I click on the someDiv element it prints: 
> someDiv click 
> Document click 

私はまた、すべてのものの上にフルスクリーンのdivを入れてトラップイベントにこれを使用してみましたが、問題はクリックのどれもが、このフルスクリーンのdivを介して伝播しないされていたことがありました。また、ちょっとハッキリと感じるように、クリックをトラップするために余分な要素を作成することに頼ることはありません。

jQueryのクリック機能を上書きして、そこに小さなチェックを入れることができますか?

ここには何かがありますか?

ありがとうございました。

答えて

22

はい.addEventListener()を使用し、3番目のオプションをtrueに設定します。。これは、リスナをキャプチャフェーズにバインドし、他のものが実行される前に関数を実行します。

ここでは、これが実行からのすべてのクリックハンドラを停止します例を示します。

document.addEventListener('click', function(e) { 
    e.stopPropagation(); 
}, true); 

がここにアクションでそれを参照してください。

http://jsfiddle.net/wLwMh/1/

+0

ああ輝かしいです!どうもありがとうございました。 Chrome 11で動作します。これは、互換性が必要なブラウザです。乾杯。 – nebs

+4

ブラウザ間の互換性が必要な人は、IE <9ではサポートされていません – opsb

0

私は$(*)セレクタを使用することは良い考えではないことを言及する必要があり、あなたのチェック

$("#someDiv").bind('awesomeEvent', function() { 
    //do stuff here 
} 

$(*).click(function() { 
    if(canClick) { 
     $(this).trigger('awesomeEvent'); 
    } 
} 

EDIT 後にバインドされ、あなたのリスナーを持つカスタムイベントをトリガし、その後、すべてのクリックイベントをキャプチャすることができパフォーマンスの観点から。あなたは実際に何とかスコープを狭めてください。