mouseout 事件发生多次答案

【问题标题】：the mouseout event occur more than one timemouseout 事件发生多次
【发布时间】：2010-11-01 14:03:26
【问题描述】：

嗨：当我将 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移出，你会得到两个警告窗口，我只想要一个。

那么如何解决呢？

【问题讨论】：

标签： javascript mouseout

【解决方案1】：

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

Javascript 工具包可能会提供解决方案，jQuery 例如emulates 那个事件：

mouseleave 事件不同于 mouseout 处理事件的方式冒泡。如果mouseout 用于这个例子，那么当鼠标指针移出 Inner 元素，处理程序将是触发。这通常是不可取的行为。 mouseleave 事件，在另一方面，只触发其鼠标离开时的处理程序它绑定到的元素，而不是后裔。所以在这个例子中，处理程序在鼠标被触发时离开 Outer 元素，但不是内部元素。

【讨论】：