1

mousedownその外側に非表示にしたいオーバーレイがあります。

これが私が試したものですが、残念ながら:notセレクターは期待どおりに機能していません。

$('body:not(.overlay)').one('mousedown',function(){
        //hide overlay here
});

私も試し$('* :not(.overlay)')ましたが、同じ問題です。

オーバーレイ ボックス内をクリックしてもオーバーレイが非表示になる

4

3 に答える 3

4 
$(document).on( "mousedown.hideoverlay", function(e){
    if( $(e.target).closest(".overlay").length === 0 ) { //overlay wasn't clicked.
        //hide overlay
        $(document).off("mousedown.hideoverlay");
    }
});
于 2012-07-02T07:36:04.230 に答える
2

body:not(.overlay)class がない場合、セレクターは body 要素と一致overlayします。あなたが意味したのは、 class のない子孫であると想定していますoverlay。

$('body :not(.overlay)'); //note the space - descendant selector

このような割り当ての問題は、一致する要素が多すぎることです (特に、選択された要素の親)。技術的には、任意のコンテナーをクリックしても、セレクターfiddleddivと一致します。これは、class を持つ要素をクリックしてもDOM に伝播し続けるために発生します。overlay

ここでの他の提案に同意します。つまり、すべてのクリックをリッスンし、セレクターが一致しない場合は何もしないのが適切ですが、それらのイベントの伝播を防止すると、ページのロジックの残りの部分に干渉する可能性があります。

クリックできる「オーバーレイ可能な」アイテムの明示的なサブセットがあり、それらを:not(.overlay)セレクターでフィルタリングするアプローチを推奨します。

$('.some-generic-container-name:not(.overlay)')...
于 2012-07-02T08:05:52.890 に答える
1

.not() 関数を試してください: http://api.jquery.com/not/。選択したグループから要素を明確に削除しますが、これはおそらくここで発生している問題です。これを解決するために複雑な if などを行う必要がなくなります

$('*').not('.overlay').on('mousedown', function(){
    alert("here");
});

編集

へー、質問を完全に読んでいませんでした：

$(document).on('mousedown', function(e){
   var target = $(e.target);
   if(!target.parents().hasClass('overlay') && !target.hasClass('overlay')){
      // hide stuff
   }
});

編集：ここをクリックすることを好みます（理由はわかりません）：

$(document).on('click', function(e){
   var target = $(e.target);
   if(!target.parents().hasClass('overlay') && !target.hasClass('overlay')){
      // hide stuff
   }
});

私の意見では、それはただ見栄えがするだけです。

于 2012-07-02T07:41:42.227 に答える