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

您需要阻止儿童的事件传播回父母。

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

Answer 2

你的javascript有mouseenter，但你是标题和描述正在谈论mousemove ..所以我认为你的意思是mousemove。您可以处理此问题的一种方法是仅在父级具有特定类时才将函数绑定到mousemouse事件。就像'active'一样，当鼠标移过子节点时，从父节点中删除活动类。

<强> Here is a fiddle to test

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

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

2 个答案: