jquery 要素のセットがある場合var elements = $('.containers');、本文内のすべての要素を選択して、その要素のセットにクリック イベントを追加するにはどうすればよいですか? 私は次のようなことを試しました、
var filtered = $('*').filter(function(index){
return elements;
});
$(document).ready(function(){
$('body').on('click', filtered, function(){
alert('something on body was clicked that wasn't "element"');
});
});
※これは全然いけません
.not()セレクターの使用。
$('body').find('*').not('.containers').on('click',function(){
// do something
});
$('body').find('*')できれば、クリック イベントを(body のすべての子要素である)よりもはるかに具体的なものにアタッチしますが、あなたが私に与えたもので作業します。または、別の方法で行うこともできます。
$('body').find('*').on('click',function(){
// do something
});
$('.containers').off('click');
これはすべてに対して設定し、.containersアイテムに対してのみ削除します。少し冗長ですが、より明示的であり、気が変わった場合は.off()関数を削除/変更するだけで済みます。
.containersできればイベント ハンドラをアタッチする前に、要素を除外するだけです。
$(document).ready(function(){
$('*').filter(function() {
return ! $(this).is('.containers');
}).on('click', function(){
alert('something on body was clicked that wasnt "element"');
});
});
編集：
コメントで示されているように、ドロップダウン、モーダル、またはその外側をクリックして同様のものを閉じようとしている場合、その方法は次のようになります。
$(function() {
$(document).on('click', function(e) {
if ( !$(e.target).closest('.containers').length ) {
// you clicked outside
}
});
});
.container とコンテナの子孫を確認したい場合は、.filter()を使用できます。次に、現在の要素が - または祖先要素に.closest()を使用して class=container があるかどうかを確認します
$('body *').filter(function(){
return $(this).closest('.containers').length === 0;
}).on('click', function(){
alert('something on body was clicked that wasn\'t "element" or inside element');
});
ここに別の解決策があります
$('body').on('click','*:not(.containers,.containers *)', function(){
alert('something on body was clicked that wasn\'t "element" or inside element');
});
より良い方法は、ドキュメントにハンドラーを1つだけ設定し、イベントがドキュメントにバブルアップしたときにクリックされた要素を確認することです。
$(document).on('click', function (event) {
var $target = $(event.target);
if ($target.hasClass('containers') || $target.closest('.containers').length > 0) {
alert('something on body was clicked that wasn't "element"');
return;
}
// Rest of logic
});
もう 1 つのオプションは、単純に にハンドラーを追加$('html')し、コンテナー ハンドラーが を呼び出すかevent.stopPropagation()、または false を返すことを確認することです。これにより、jQuery で自動的に停止する伝播が処理されます。
$('html').on('click', function () {
alert("Clicked!");
});
$('.containers').on('click', function (event) {
return false;
});
あなたがしているように聞こえること、つまりメニューを閉じることについては、これは単純で直接的な解決策です。
サンプルコードの問題の1つは、アラート内のエスケープされていない一重引用符です。
特定の要素を除外する場合は、設定したルート（イベントを本文に添付）を使用して、イベントターゲットに特定のクラスがあるかどうかを確認することをお勧めします。このような：
$(document).ready(function(){
$('body').on('click', function(e){
if ($(e.target).hasClass('containers') || $(e.target).closest('.containers').length > 0)
return; // do nothing with elements that have the container class
alert('something on body was clicked that wasn\'t "element"');
});
});
「しないでください」という単語の余分なアポストロフィのエスケープに注意してください：don\'t。
ドキュメントと関連資料
jQuery.hasClass-http ://api.jquery.com/hasClass/jQuery.closest-http ://api.jquery.com/closest/