6

.fourクラスのないものがクリックされたときに発生するイベントを設定しようとしています。ただし、.fourを使用しているのに、クラスのあるものがクリックされると起動しますe.stopPropagation()。

$("html").one("click", ":not(.four)", function(e){
   e.stopPropagation();
   console.log("Something without class 'four' was clicked that had class: " + $(e.srcElement).attr("class") );
});

（jsFiddleデモ）

これも機能しません：

$("html").not('.four').on("click", function(e){

両方の出力：Something without class 'four' was clicked that had class: four

私はたくさんの問題を抱えて:not()おり、CSS3をサポートしているブラウザに関係しているのではないかと思いますが、:not()それでもこの単純な問題を理解することはできません。

4

4 に答える 4

6

あなたのコード：

$("html").one("click", ":not(.four)", function(e){
    e.stopPropagation();
    // other code
});

クリックイベントタイプのグローバルイベント委任を設定します。つまり、ページ上の任意の要素でクリックイベントがトリガーされるたびに、jQueryはその要素が提供されたセレクター":not(.four)"と一致するかどうかを確認します---一致する場合、jQueryはその要素のハンドラーを呼び出します。

.fourこれは、要素をクリックするとどうなるかです。

  1. クリックイベントがトリガーされる元の要素は、明らかに.four要素です。":not(.four)"jQueryは、その要素がセレクターと一致するかどうかを確認します。そうでないため、ハンドラーはその要素で呼び出されません。

  2. クリックイベントはDOMツリーをバブルアップします。このクリックイベントの伝播はまだキャンセルされていないため、イベントは、元の要素.two（デモ内の要素）の親である次の要素でトリガーされます。この場合も、jQueryは要素がセレクターと一致するかどうかを確認します。そのため、ハンドラーはその要素で呼び出されます。

ご覧のとおり、要素をクリックしてもハンドラーが呼び出されます。.four要素がクリックされたときにコードが実行されないよう.fourにするには、ハンドラー内で明示的にチェックする必要があります。基本的には、Jasonのソリューションが行うことです。

于 2013-01-01T01:53:05.530 に答える
2

ŠimeVidasが指摘したように、これは望ましい回避策です。

function doThisOnce(e) {
   e.stopPropagation();

   if(!$(this).is(".four")){
        console.log("Something without class 'four' was clicked that had class: " + $(e.srcElement).attr("class"));
        $(".one").addClass("pretty");
    }
    else {
        // need to rebind the click event
        $(document).one("click", "*", doThisOnce);
    }
}
$(document).one("click", "*", doThisOnce);
于 2013-01-01T01:22:14.267 に答える
2

これが私が貢献したい解決策です。このリスナーを他のリスナーと並べて配置します。

$("html").one("click", ".four", function(e){
       e.stopPropagation();
});
$("html").one("click", function(e){
    // other code
});

それは伝播を防ぎ.four、他のリスナーにバブリングするのを「盗む」または「キャッチ」します。「キャッチャー」リスナーを他のリスナーよりも低いレベルに配置すると、次々にバブルするかどうかによっては役立つ場合があります。

jsFiddleデモをご覧ください、動作します、ついに！

于 2013-01-01T02:19:56.177 に答える
0

イベントを使用した別のアプローチは次のtargetとおりです。

$(document).one("click", function(e){
    if( ! $(e.target).closest('.four').length ){
         console.log("Something without class 'four' was clicked that had class: " + $(e.srcElement).attr("class") );
     }
});

closest()クラスの子とクラス要素自体が一致します

于 2013-01-01T02:15:41.703 に答える