javascript - JavaScript 的 onmouseout 事件未按预期工作

Question

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

这是 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元素是的“外部部分” div）。奇怪的是，当鼠标离开图像时（但鼠标停留在上div），它也会显示警报消息。

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

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

score 3 · Accepted Answer

使用mouseenterandmouseleave代替：

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

1 回答 1