javascript - 关于 onmouseout 事件

标签 javascript dom-events

如以下代码所示:

<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”上不会触发警报。

如何做到这一点?

最佳答案

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

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

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

关于javascript - 关于 onmouseout 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3013292/

相关文章:

javascript - 如何访问从子类型调用的父类(super class)型中的js事件对象?

javascript - 如何使用 JavaScript API 开始捕获 Youtube 视频

javascript - 在 Vue.js 中切换过滤结果时的奇怪行为

javascript - JavaScript 如何识别事件对象变量?

javascript - 内部有多个插入的异步映射

javascript - 加快图像背景的页面加载

javascript - Angular 2 模板驱动的表单组验证

javascript - if 语句使我的 javascript 程序停止工作

单击元素的填充时不会触发 Javascript Click 事件

javascript - Angular 选择不填充选项