jquery - jQuery $('html, body').not()

Question

ここ- divではなくどこかをクリックしたときにアラートが発生するようにします。

div をクリックすると、アラートも表示されます。

JS

$("html, body").not('.entry-content').click(function() {            
    alert('d');                        
}); ​

HTML

<div class="entry-content"> kkkk </div>​

Answer 1

イベント引数を使用して、クリックされたターゲットを確認し、false を返すことができます

$("html, body").click(function(e) {
    if ($(e.target).hasClass('entry-content')) {
        return false;
    }
    alert('d');
});​

http://jsfiddle.net/keyZw/

.not() フィルターを使用していますが、まだ html/body の一部であるため、クリック関数内で処理する必要があります。また、クリックイベントをバインドしているだけです..

そう

 // find html,body - not ones with class=entry-content - bind click
 $("html, body").not('.entry-content')

あなたのdivはまだ体の中にあるので、それはアラートを妨げません

前述のように..実際に体にバインドするだけで済みます

$("body").click(function(e) {
    if ($(e.target).hasClass('entry-content')) {
        return false;
    }
    alert('d');
});​

Answer 2

$("html *").click(function(e) {
    if ( e.target.className.indexOf("entry-content") < 0 ) {
        alert('d');
    }
}); 

デモ

---

.not()がその前のセレクターに適用されるため、元のコードは機能htmlしませんbody。どちらも のクラスを持たないentry-contentため、イベントが発生します

Answer 3

クリックした要素の伝播を停止することもできます

$("body").click(function() {
    alert();
});

$(".entry-content").click(function(e) {
    e.stopPropagation();
});

サブ要素をクリックしても機能します

<div class="entry-content">Element
  <span>Sub element</span>
</div>​

フィドルをチェックしてください

Answer 4

問題は、HTML タグと BODY タグにクリック イベントを追加していることです。したがって、最初に、ボディ領域をクリックすると 2 つのアラートが表示されます。また、イベントが伝播する方法により、問題の DIV をクリックすると、クリック イベントが body と html にも伝播されます。したがって、アラート メッセージを表示するかどうかを決定するには、クリック ハンドラー内でチェックを行う必要があります。

以下の jsfiddle を変更して、セレクターに HTML のみを含めentry-content、ハンドラー内のクラスをチェックしました。

http://jsfiddle.net/m2eqS/6/

$("html").click(function(e) {
    if(!$(e.target).hasClass("entry-content")){
      alert('TEST');
   }                        
}); ​

HTML へのバインドと BODY へのバインドの違いは、ページのどこでもクリックできるようにしたい場合、コンテンツ/本文が終了する場所の下で、HTML を使用する必要があることです。それ以外の場合は、BODY を使用します。