Почему событие onMouseOver вызывается, когда мышь перемещается только во внутренний элемент?

Question

Когда мышь наводится на внутренний элемент, сначала вызывается событие mouseOut для внешнего элемента, затем вызывается элемент mouseOver для внутреннего элемента, а затем - элемент mouseOver для внутреннего элемента.

Почему это происходит? Поскольку внутренний элемент технически все еще находится внутри внешнего элемента, поэтому мышь не покидает внешний элемент при перемещении во внутренний элемент. Есть ли способ предотвратить это?

Полный пример здесь: http://jsfiddle.net/pMCeu/4/

Answer 1

Чтобы избежать этого, вы должны использовать mouseenter и mouseleave вместо mouseover и mouseout.

Это происходит из-за пузырьков событий.взгляните на этот пост, чтобы узнать больше.