Javascript: несколько событий mouseout, вызванных

Question

Я знаю различные модели событий в Javascript (модель WC3 по сравнению с моделью Microsoft), а также разницу между пузырьками и захватом. Однако через несколько часов, читая различные статьи об этой проблеме, я все еще не уверен, как правильно кодировать следующее, казалось бы, простое поведение:

Если у меня есть внешний div и внутренний элемент div, я хочу, которое вызывается, когда мышь покидает внешний-div. Когда мышь пересекает внутренний-div на внешний-div, ничего не должно произойти, и когда мышь пересекает внешний-div во внутренний div, ничего не должно произойти. Событие должно только огонь, если мышь перемещается из внешнего-div на соседнюю страницу.

<div id="outer" style = "width:20em; height:20em; border:1px solid #F00" align = "center" onmouseout="alert('mouseout event!')" > 
<div id="inner" style = "width:18em; height:18em; border:1px solid #000"></div> 
</div> 

Теперь, если я помещаю «MouseOut» событие на внешнем DIV, два MouseOut события вызывается, когда мышь перемещается от внутрипартийных дел до окружающей страницы, потому что пожары события один раз, когда мышь перемещается из внутренней в внешнюю, а затем снова, когда она перемещается из внешней к окружающей странице.

Я знаю, что могу отменить событие, используя ev.stopPropagation(), поэтому я попытался зарегистрировать обработчик события с внутренним-div, чтобы отменить распространение события. Однако это не будет препятствовать тому, чтобы событие срабатывало, когда мышь перемещается из внешнего-div во внутренний-div.

Итак, если я не замечаю что-то, мне кажется, что это поведение невозможно выполнить без сложных функций отслеживания мыши. В будущем я планирую переопределить многие из этого кода, используя более продвинутую структуру, такую ​​как JQuery, но пока мне интересно, есть ли простой способ реализовать описанное выше поведение в обычном Javascript.

Answer 1

Событие mouseout на внутреннем div 'пузырьки' на внешний div. Для того, чтобы обнаружить, что это произошло от внешнего DIV, проверить target свойство event:

<div id="outer"> 
    <div id="inner">x</div> 
</div> 

document.getElementById('outer').onmouseout= function(event) { 
    // deal with IE nonsense 
    if (event===undefined) event= window.event; 
    var target= 'target' in event? event.target : event.srcElement; 

    if (target!==this) return; 
    ... 
}; 

Обычная проблема с mouseout это вы получаете, когда указатель перемещается «из» материнского даже если он только движется «в» к ребенку. Вы можете обнаружить этот случай вручную, просматривая список предка элемента мышь двигается в:

var other= 'relatedTarget' in event? event.relatedTarget : event.toElement; 
    while ((other= other.parentNode).nodeType===1) 
     if (other===this) return; 

Это модель mousein/mouseout: это только интересует, какой элемент является непосредственным родителем мыши. То, что вы чаще всего хотите, это модель /mouseleave, в которой рассматриваются деревья элементов в целом, поэтому вы получите только mouseleave, когда указатель покидает элемент или его потомки и не перемещается непосредственно в элемент- его-потомки.

К сожалению, mouseenter/mouseleave в настоящее время представляет собой пару событий только для IE. Надеемся, что другие браузеры подберут его, так как ожидается, что он станет частью DOM Level 3 Events.