クリックイベントは子どもではなく、親DIVでのみ発生するのはどうですか？

Question

私は分類foobarとDIV、およびunclassedであることDIV内のいくつかのdiv要素を持っていますが、私は彼らがfoobarクラスを継承しているとします

$('.foobar').on('click', function() { /*...do stuff...*/ }); 

私はそれがどこかでクリックしたときにのみオフに解雇したいですDIVはその子のDIVではない。

Answer 1

e.targetがthisと同じ要素の場合は、子孫をクリックしていません。

$('.foobar').on('click', function(e) { 
 
    if (e.target !== this) 
 
    return; 
 
    
 
    alert('clicked the foobar'); 
 
});

.foobar { 
 
    padding: 20px; background: yellow; 
 
} 
 
span { 
 
    background: blue; color: white; padding: 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class='foobar'> .foobar (alert) 
 
    <span>child (no alert)</span> 
 
</div>

Answer 2

//bind `click` event handler to the `.foobar` element(s) to do work, 
//then find the children of all the `.foobar` element(s) 
//and bind a `click` event handler to them that stops the propagation of the event 
$('.foobar').on('click', function() { ... }).children().on('click', function (event) { 
    event.stopPropagation(); 
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler) 
}); 

これは.foobar要素（複数可）の子要素（複数可）のいずれかにclickイベントの伝播（バブリング）を停止しますので、イベントはしません.foobar要素に到達してイベントハンドラを起動します。ここで

はデモです：http://jsfiddle.net/bQQJP/

Answer 3

あなたはあなたの好意でバブリング使用することができます。

$('.foobar').on('click', function(e) { 
    // do your thing. 
}).on('click', 'div', function(e) { 
    // clicked on descendant div 
    e.stopPropagation(); 
}); 

Answer 4

$(".advanced ul li").live('click',function(e){ 
    if(e.target != this) return; 
    //code 
    // this code will execute only when you click to li and not to a child 
}) 

Answer 5

あなただけの新しいブラウザをターゲットに気にしない場合に動作し、別の方法があります。 CSSを追加するだけで、クリックをキャプチャしたいdivの子供にCSSを追加してください。

pointer-events: none; 

ここで私は同じ問題を抱えていたし、（他の回答に基づいて）このソリューション

$(".newsletter_background").click(function(e) { 
    if (e.target == this) { 
     $(".newsletter_background").hide(); 
    } 
}); 

基本的にはターゲットがdiv要素は、その後実行された場合言う思い付いた

http://caniuse.com/#feat=pointer-events

Answer 6

サポート表ですそれ以外の場合は何もしないでください（非表示にしないでください）