Question

您好：当我将一个mouseout事件添加到父元素时，似乎它的所有子元素也被添加到此事件中，如果该事件是鼠标单击等，则它可以正常工作。

但是对于mouseout事件，这会导致一些意外结果。

看一下这个例子：

<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>

请从红色div移动到黑色div，然后移出黑色div，然后你会得到两个警告窗口，我只想要一个。

那么如何解决呢？

Answer 1

在没有mouseleave事件的情况下使用普通javascript是不可能的，据我所知，这只是Internet Explorer支持。

Javascript工具包可以提供解决方案，jQuery例如emulates该事件：

mouseleave事件不同于 mouseout处理事件的方式冒泡。如果使用了mouseout 这个例子，然后当鼠标指针移出内部元素，处理程序将是触发。这通常是不合需要的行为。 mouseleave事件发生了另一方面，只触发它当鼠标离开时的处理程序它必然是一个元素，而不是一个后裔。所以在这个例子中，处理程序在鼠标时触发离开外部元素，但不是内部元素。

mouseout事件发生了不止一次

1 个答案: