onMouseOut в отце вызывается, когда onMouseOver в дочернем

0

У меня есть этот код:

http://jsfiddle.net/SXj2W/

<div id='father' style='width:50px; height:50px;overflow:hidden;' onMouseOut="alert('called');">
    <div id='container' style='margin-top:0px;width:100%;height:100%;transition: margin 2s;'>
        <div style='width: 50px;height:50px;background-color:rgb(255,0,0);' onClick="document.getElementById('container').style.marginTop='-50px'"></div>
        <div style='width: 50px;height:50px;background-color:rgb(0,0,255);' onClick="document.getElementById('container').style.marginTop='0px'"></div>
    </div>
</div>

Если вы нажмете на красную рамку, синий ящик появится снизу... когда onMouseOver вызывается синий ящик, onMouseOut от отца тоже называется...

Знаете ли вы обходной путь, чтобы не видеть предупреждение, если мышь все еще находится внутри "отца".

Теги:

1 ответ

3
Лучший ответ

Вот обновленная скрипка с рабочим примером: http://jsfiddle.net/SXj2W/2/

Когда onmouseout уволен, вы должны проверить, что цель, связанная с событием, не является дочерним элементом вашего родительского DIV. Вы можете сделать это, используя приведенный ниже код.

Добавьте функцию для вызова мыши на страницу <HEAD>

function onMouseOut(self,event) {    
   var e = event.toElement || event.relatedTarget;
    while(e && e.parentNode && e.parentNode != window) {
        if (e.parentNode == self||  e == self) {
            if(e.preventDefault) e.preventDefault();
            return false;
        }
        e = e.parentNode;
    }
    alert('Mouseout on father');
}

А затем обновите родительский div, чтобы он выглядел так:

<div id='father' style='width:50px; height:50px;overflow:hidden;' onmouseout="onMouseOut(this,event)">
  • 0
    Именно то, что мне нужно: D работает как шарм! Спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню