javascript - jQueryで子ではなく親でイベントをトリガーする方法

Question

私はこのHTMLを持っています:

<div id="parent">
     <div id="child></div>
</div>

グラフィカルに次のように表示されます。

---------------------------
-                         -
-    #parent              -
-                         -
-         ----------      -
-         -        -      -
-         - #Child -      -
-         -        -      -
-         ----------      -
-                         -
---------------------------

#parentjQuery でイベントをトリガーするにはどうすればよいですか (ロールオーバーなど) 。#child

Answer 1

event.stopPropagation()を使用できます

それに似た質問はjquery stop child triggering parent eventです

$("#parent").click(function(event){
  //do something with parent

});
$("#child").click(function(event){
  event.stopPropagation();

});

Answer 2

return falseイベント ハンドラーからの場合、イベントが次の祖先にバブリングするのを停止します。

http://jsfiddle.net/jbabey/CV76D/

$('#outer').mouseover(function () {
    $(this).addClass('green');
});

$('#inner').mouseover(function () {
    return false;
});

Answer 3

$('#parent').on('click',function(e){
    if(e.target === document.getElementById('child')) return false;
    // your code 
})

しかし、私の見解では.stopPropagation()、他の人が言ったように、に頼る方が良いでしょう。

Answer 4

event.stopPropagation を調べるとうまくいくと思います...

$("#someElement").click(function(event){
  event.stopPropagation();
  // do something
});  

http://api.jquery.com/event.stopPropagation/