0

嗨：当我向父元素添加 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，然后你会得到两个警报窗口，我只想要一个。

那么如何解决呢？

4

1 回答 1

0

使用没有mouseleave事件的纯 javascript 是不可能的，据我所知，只有 Internet Explorer 支持。

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

该mouseleave事件不同于 mouseout它处理事件冒泡的方式。如果mouseout在此示例中使用，则当鼠标指针移出Inner 元素时，将触发处理程序。这通常是不受欢迎的行为。mouseleave另一方面，该事件仅在鼠标离开它所绑定的元素而不是后代元素时触发其处理程序。所以在这个例子中，当鼠标离开外部元素而不是 内部元素时触发处理程序。

于 2010-11-01T14:19:17.713 回答