событие Mouslout происходит более одного раза

StackOverflow https://stackoverflow.com/questions/4069558

  •  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 Событие, с другой стороны, только запускает свой обработчик, когда мышь оставляет элемент, не является потомком. Так в этом примере обработчик срабатывает, когда мышь оставляет Наружный элемент, но не Внутренний элемент.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top