本文详解解决自定义光标（img 元素）在 mouseleave 事件中无法隐藏的问题，核心在于为光标图像添加 pointer-events: none，避免其遮挡父容器事件捕获。
本文详解解决自定义光标（img 元素）在 `mouseleave` 事件中无法隐藏的问题，核心在于为光标图像添加 `pointer-events: none`，避免其遮挡父容器事件捕获。
在实现基于 DOM 元素的自定义光标时，一个常见却容易被忽视的问题是：当使用 标签作为光标载体并动态定位时，该图片元素会实际占据页面布局空间并响应鼠标交互——即使它被设为 position: absolute。一旦鼠标从目标区域（如 .box）移动到该
上，浏览器会触发 mouseleave 事件（因鼠标离开了 .box 的边界），但紧接着又因进入
自身而中断了对 .box 的持续 hover 状态；更关键的是，
默认具有 pointer-events: auto，会拦截鼠标事件，导致 .box 无法正确感知“鼠标已离开”，从而 mouseleave 回调不被触发，光标无法隐藏。
解决方案非常简洁但至关重要：显式设置 customCursor.style.pointerEvents = "none"。这使得光标图像完全不参与鼠标事件捕获，鼠标行为如同“穿透”该元素，.box 能持续准确监听 mousemove 和 mouseleave。
以下是修复后的完整实现代码：
const box = document.querySelector(".box");
const customCursor = document.createElement("img");
// ✅ 关键修复：禁用光标元素的鼠标事件捕获
customCursor.style.pointerEvents = "none";
customCursor.style.width = "175px";
customCursor.style.height = "175px";
customCursor.style.position = "absolute";
customCursor.style.left = "0";
customCursor.style.top = "0";
customCursor.style.transform = "translate(-50%, -50%)"; // 更精准的居中定位（推荐替代 left/top 计算）
customCursor.src = "https://picsum.photos/175";
customCursor.style.display = "none";
box.appendChild(customCursor);
box.addEventListener("mousemove", (e) => {
customCursor.style.display = "block";
// 使用 transform 实现更稳定、高性能的定位（避免 layout 触发）
customCursor.style.left = `${e.pageX}px`;
customCursor.style.top = `${e.pageY}px`;
});
box.addEventListener("mouseleave", () => {
customCursor.style.display = "none";
});
配套 CSS 建议补充：
.box {
cursor: none; /* 隐藏原生光标 */
width: 100%;
padding: 5rem;
background-color: lightblue;
position: relative; /* 确保绝对定位的光标相对 box 定位（可选，当前逻辑依赖 viewport 坐标） */
}
⚠️ 注意事项：
- 不要遗漏 pointer-events: none —— 这是本问题的根本解法，缺之则 mouseleave 几乎必然失效；
- 推荐使用 transform: translate(-50%, -50%) 配合 left/top 设置坐标，比手动减去宽高一半更健壮（尤其在图片未完全加载时）；
- 若需支持多区域或全局自定义光标，建议封装为可复用函数，并统一管理光标元素生命周期；
- 在移动端或触控设备上，此方案不适用（需改用 touchmove + touchend 并注意 clientX/Y 兼容性）。
通过这一行关键样式，即可让自定义光标真正“隐形于事件流”，实现流畅进出响应——既专业又可靠。
