событие Mouslout происходит более одного раза
-
28-09-2019 - |
Вопрос
Привет: Когда я добавляю событие мышечного варианта к родительскому элементу, кажется, что все его ребенок также добавляют это событие, это хорошо работает, если событие - это щелчок мыши и т. Д.
Однако для события мыши, это приведет к нему неожиданному результату.
Посмотрите на этот пример:
<html>
<head>
<script type="text/javascript">
function init(){
document.getElementById('par').onmouseout=function(){alert('mouse out')};
}
</script>
</head>
<body onload='init()'>
<div id="par" style="width:400px;height:300px">
<div style="background-color:red;width:100%;height:150px"></div>
<div style="background-color:black;width:100%;height:150px"></div>
</div>
</body>
</html>
Пожалуйста, перейдите из Red Div в Black Div, затем выйдите из Black Div, вы получите два окна оповещения, я просто хочу один.
Так как это исправить?
Решение
Это невозможно использовать простой JavaScript без MouseLeave. Событие, которое, к своим знаниям, поддерживается только Internet Explorer.
Набор инструментов JavaScript может обеспечить решение, jquery например эмулирует Это событие:
То
mouseleave
Событие отличается отmouseout
в том, как он обрабатывает пузырька события. Еслиmouseout
использовались в этом примере, то когда указатель мыши переместился из Внутреннийэлемент, обработчик будет запущен. Это обычно нежелательное поведение. Тоmouseleave
Событие, с другой стороны, только запускает свой обработчик, когда мышь оставляет элемент, не является потомком. Так в этом примере обработчик срабатывает, когда мышь оставляет Наружный элемент, но не Внутренний элемент.