JavaScript's onmouseout事件未按预期工作

JavaScript's onmouseout event not working as expected

本文关键字：工作 事件 onmouseout JavaScript      更新时间：2023-09-26

在动态创建的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元素是"div的外部"一样）。奇怪的是，当鼠标离开图像时（但鼠标仍在div上），它也会显示警报消息。

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

有人知道怎么解决这个问题吗？

改用mouseenter和mouseleave：

$('body').on('mouseleave', 'div#imageWrapper', function () {
    alert("Test");
});
相关文章：