javascript - 如何在 jQuery 中触发父事件而不是子事件

Question

我有这段 html：

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

它看起来像这样：

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

如何在 jQuery 中触发一个事件（例如翻转），该事件仅在悬停时有效，#parent但在悬停时无效#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

我认为调查 event.stopPropagation 可以解决问题...

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

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

Answer 3

如果您return false来自事件处理程序，它将阻止事件冒泡到下一个祖先。

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

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

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

Answer 4

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

.stopPropagation()但是，正如其他人所说，在我看来，求助于会更好。