Когда я связываю событие 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 есть указатель мыши, но ваше название и описание говорят о перемещении мыши ... поэтому я предполагаю, что вы имели в виду перемещение мыши.Один из способов справиться с этим - привязать функцию к событию mousemouse, только если у родителя есть определенный класс.Подобно 'active', удалите класс 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();
})