Когда я привязываю событие mousemove к родителю, как остановить дочерний элемент для ответа на событие mousemove?

<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 на дочернем слое, так как может быть много соседних дочерних слоев. Событие пересечения между дочерними слоями не должно запускать функцию.


jquery mousemove
person Pin Rob    schedule 15.12.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В вашем javascript есть mouseenter, но ваш заголовок и описание говорят о mousemove.. поэтому я предполагаю, что вы имели в виду mousemove. Один из способов справиться с этим — привязать функцию к событию мыши и мыши, только если у родителя есть определенный класс. Например, «активный» и удалите активный класс из родителя, когда мышь проходит над дочерним элементом.

Вот скрипт для тестирования

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

arrow_upward
1
arrow_downward

Вам нужно заблокировать распространение событий от детей обратно к родителям.

$("#child").mouseenter(function(e){
  e.stopPropagation();
})
person loganfsmyth    schedule 15.12.2011
comment
Я работаю лучше, когда пытаюсь. Это предотвращает повторение события mouseleave. Спасибо за вашу помощь! - person Pin Rob; 17.12.2011