jquery - jquery .on() クリックと :not

Question

$(document).on('click', 'body:not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});

上記を使用すると、pagem をクリックすると、console.log が表示clikされます。要素をクリックしても、起動.add-toすべきではないときに起動します。

私は何かを台無しにしましたか？

<ul class="user-controls">
    <li>
        <a class="add-to" href="#">
            <img src="/assets/img/icons/add-feed.png" class="favicon">
            <span>Add</span>
        </a>
        <div></div>
    </li>
</ul>

score 3 · Accepted Answer

クラスが公開されていない場合、セレクターはページbody:not(.add-to)の要素と一致します。その子孫のいずれとも一致しません。<body>add-to

あなたが探しているかもしれません：

$(document).on('click', 'body :not(.add-to)', function(e) {
    console.log('click');
});

しかし、その場合、body先祖は必要なく、次のように書くだけで済みます:

$(document).on('click', ':not(.add-to)', function(e) {
    console.log('click');
});

編集:<img>投稿したマークアップから、または要素をクリックするとハンドラーがトリガーされることが明らかになります。<span>これらの要素はいずれもadd-toクラス自体を公開しないためです。

この問題は、closest()をe.targetに適用することで回避できます。

$(document).on("click", function(e) {
    if (!$(e.target).closest(".add-to").length) {
        console.log("click");
    }
});

に渡す:not(.add-to *)とほぼ同じ結果になりますが、完全ではないことに注意してください。要素にテキストコンテンツがあり、そのコンテンツがクリックされた場合、on()そのセレクターはへの呼び出しの実行を妨げません。console.log()<a>

closest()一方、に基づくソリューションconsole.log()は、これらの状況での実行を防ぎます。

score 0 · Accepted Answer

body間にスペースが必要です。:not(.add-to)それ以外の場合は、 class で body 要素を除外するように指示していますadd-to:

$(document).on('click', 'body :not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});

例 - http://jsfiddle.net/UF44p/

score 0 · Accepted Answer

ボディの間にスペースを追加して子孫を取得します

$(document).on('click', 'body :not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});

score 0 · Accepted Answer

そこに体はいらない

$(document).on('click', ':not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});

今のところ、あなたはクラスを持たないその体を言っています.add-to

score 0 · Accepted Answer

セレクターは、クラスbodyを持たないすべての要素に一致するためです。add-to

あなたがやろうとしていることは、次のようなものです：

$(document).on('click', 'body > *:not(.add-to)', function(e){
    console.log('click');
});

jquery - jquery .on() クリックと :not

5 に答える 5

Related

Reference