JavaScript 的 onmouseout 事件未按预期工作答案

【问题标题】：JavaScript's onmouseout event not working as expectedJavaScript 的 onmouseout 事件未按预期工作
【发布时间】：2012-08-22 20:15:25
【问题描述】：

在动态创建的 HTML 元素中使用 onmouseout 事件时遇到问题。

这是 HTML 代码：

<div id="imageWrapper">
    <img src="imageUrl" alt="">
</div>

这是 JavaScript 代码的一部分（使用 jQuery 1.7.2）：

$('body').on('mouseout', 'div#imageWrapper', function () {
    alert("Test");
});

显然，我想要检测鼠标何时离开div#imageWrapper 并显示警报消息。

它有效，但不像我预期的那样有效：

当鼠标离开div#imageWrapper 时，它会显示警报，但是当鼠标在div 内部时，它也会显示它（好像img 元素是“外部的一部分”div)。奇怪的是当鼠标离开图片时（但鼠标停留在div上），它也会显示警告信息。

底线：JavaScript 将其中的div#imageWrapper 和img 元素视为两个不同的div#imageWrappers。

有谁知道如何解决这个问题？

【问题讨论】：

【解决方案1】：

改用mouseenter 和mouseleave：

$('body').on('mouseleave', 'div#imageWrapper', function () {
    alert("Test");
});

【讨论】：