javascript - 关于 onmouseout 事件

Question

如以下代码所示:

<div id="outerBox" style="border:1px solid red;width:300;height:300" onmouseout="alert('out')">
<div id="innerBox" style="border:1px solid blue;width:50;height:50">inner</div>
</div>

为什么当我将鼠标移到“innerBox”上时，会触发alert('out')？

我希望鼠标移出“outerBox”时仅触发 alert('out')，鼠标移到“innerBox”上不会触发警报。

如何做到这一点？

Answer 1

这是 mouseout 和 mouseover 事件的标准行为。 Internet Explorer 实际上在这方面比竞争对手更胜一筹(有所改变)，因为它具有提供您正在寻找的行为的专有事件； onmouseenter 和 onmouseleave。主要缺点是这些事件不是标准的一部分，并且其他浏览器尚未实现它们。

如果您使用jQuery ，它有一个很好的跨浏览器实现 .mouseleave() 。无论如何，使用框架来处理跨浏览器事件是个好主意。它不一定是 jQuery，但我不确定其他是否有 mouseleave 事件。

如果您没有使用 jQuery 或提供模拟事件的框架，请参阅 http://ecmascript.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/