JavaScript onmouseout事件无法按预期工作

Question

我在动态创建的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元素时，它也会显示警告（就好像img 1}}元素是“div”的“外部”。奇怪的是，当鼠标离开图像时（但鼠标仍在div上），它也会显示警告信息。

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

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

谢谢！

Answer 1

改为使用mouseenter和mouseleave：

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