当我将 mousemove 事件绑定到父级时，如何阻止子级响应 mousemove 事件？

Question

<div id="father" style="top:10px;left:10px;width:500px;height:500px">
  <div id="child" style="position:relative;top:50px;left:50px;width:100px;height:100px">    
  </div>
</div>

$("#father").mousemove(function(){
   alert("out");
})

如何只在父级上绑定 mousemove 事件，而不继承子级？ 当我在父图层中移动鼠标时，可以调用该函数，但在子图层中则不能调用该函数。 PS：我不需要子层上的 mouseout 事件，因为可能有许多相邻的子层。子层之间的交叉事件不需要触发该函数。

Answer 1

你的javascript有mouseenter，但你的标题和描述正在谈论mousemove..所以我假设你的意思是mousemove。处理此问题的一种方法是仅当父级具有特定类时才将函数绑定到 mousemouse 事件。与“active”类似，当鼠标移到子级上时，从父级中删除活动类。

这是一个要测试的小提琴

$('#child').mouseenter(function() {
    $(this).parent().removeClass('active')
}).mouseleave(function() {
    $(this).parent().addClass('active')
});
$('body').delegate("#father.active", "mousemove", function() {
    console.log("moving");
})

Answer 2

您需要阻止孩子的事件传播回父母。

$("#child").mouseenter(function(e){
  e.stopPropagation();
})