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()，正如其他人所说的那样

如何在jQuery中触发父节点而不是其子节点上的事件

4 个答案: