Javascript MouseOver / MouseOut детские события

Question

У меня есть элемент с некоторыми дочерними элементами. Когда мышь покидает родительский элемент, я хочу скрыть родителя и его детей. Проблема, с которой я столкнулся, заключается в том, что при наведении курсора на любого из детей происходит событие mouseout Какой лучший способ предотвратить это? Я действительно хочу, чтобы событие срабатывало только тогда, когда мышь находится не внутри родительского объекта или его дочерних элементов.

Answer 1

Вам нужен только обработчик мышки, прикрепленный к родительскому элементу. Но ...

Вам необходимо убедиться, что родительский объект на самом деле является целью события mouseout, а не события, всплывающего от одного из дочерних элементов. Проверьте event.target (W3C) и event.srcElement (IE).

Вам также необходимо проверить, что элемент, который будет вводить мышь, не является потомком родителя. Проверьте event.relatedTarget (W3C) и event.toElement (IE).

Answer 2

Событие переходит от дочернего к родительскому (где оно перехватывается)

Вы должны поймать событие на дочерних элементах, добавив прослушиватель и остановив распространение там.

Этот код предотвратит всплывание события до родительского обработчика

function onMouseLeave(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

question: Событие отключения мыши запускается родителем, когда это не должно происходить. Мышь над ребенком не должна вызывать мышью у родителя. Как мы можем остановить это?

Answer 3

С http://api.jquery.com/mouseover/:

mouseover срабатывает, когда указатель перемещается и в дочерний элемент, тогда как mouseenter срабатывает только тогда, когда указатель перемещается в связанный элемент.

и то же самое относится к mouseout против mouseleave