События пузырь вверх по дереву DOM .Поэтому, когда курсор покидает элемент img, генерируется событие mouseout и запускается обработчик события, связанный с родительским элементом li.
Существует два пути , которые вы можетеиметь дело с этой ситуацией:
Предотвращение всплытия события
Если вы хотите предотвратить всплытие события, вы назначаете обработчик события для элемента, из которого происходит событиеи вызовите метод stopPropagation объекта event (или свойство cancelBubble в IE):
function handler(event) {
event = event || window.event; // IE
if(event.stopPropagation) {
event.stopPropagation(); // W3C
}
else {
event.cancelBubble = true; // IE
}
}
Проблема в том, что вы должны привязать этот обработчик к каждому дочернему элементу, что не очень удобно,Поэтому следующий способ легче реализовать.
Проверка источника события
Вы можете получить ссылку на элемент, откуда происходит событие, с помощью event.target (или event.srcElement в IE).Обработчик событий, который вы привязываете к элементу li, должен выглядеть следующим образом:
function handler(event) {
event = event || window.event; // IE
var target = event.target || event.srcElement; // IE
if(target === this) { // event originated where the handler was bound to
console.info('out');
}
}
и вызывать его с помощью
onmouseout="handler.call(this, event);"
Обратите внимание, что привязка обработчиков событий inline , как и вы, плохой дизайн, поскольку он смешивает презентацию с логикой приложения.Есть два других способа связывания обработчиков событий
Я рекомендую прочитать статьи об обработке событий на quirksmode.org .