onmouseover запущен до событий click и mouseout?

Question

Неиспользуемые ссылки с помощью onmouseover () получил интересный вопрос, когда я попытался на него ответить.После некоторых экспериментов с журналом я настроил http://jsfiddle.net/RnGxP/1/. Последние два примера работают, как и ожидалось, скрываются при нажатии на кнопку «Закрыть» или при выходе из «Закрыть» div.

Первые два примераустановите новый innerHTML в div всякий раз, когда мышь перемещается в нем (я бы никогда этого не сделал сам, но ...).Таким образом, при перемещении мыши в одну из них они расширяются.И, перемещая мышь дальше по ссылке или разделу «закрыть», запускается больше событий перемещения.

Но затем, нажимая на кнопку закрытия во втором примере - без перемещения мыши - вместо щелчкасобытие два события mousemove запускаются! Что именно здесь происходит? Я могу понять, что событие щелчка каким-то образом теряется (теряет свою цель?) При сбросе innerHTML, но почему событие mousemove срабатывает до ?

Answer 1

Вы переписываете innerHTML элемента div в событии mouseover.Это означает, что каждый раз, когда вы перемещаете мышь, она фактически перемещается по новому узлу, который вызывает новое событие mouseover на этом узле, которое всплывает до элемента div, который переписывает innerHTML и т. Д. И т. Д..

Таким образом, к тому времени, когда событие mouseout запускается на внутреннем div, событие mouseover уже переписало innerHTML на внешнем div, и, таким образом, внутреннее divне имеет родителя ...

То, что вы действительно хотите использовать, это событие mouseenter (и предположительно событие mouseleave на внутреннем div), которое раньше было проприетарным для Internet Explorer, но в соответствии с MDN Firefox 10 и Opera 11.10 также поддерживают его.