本文详解为何自定义光标图像在 mouseleave 事件后仍不消失，并提供关键修复（pointer-events: none）及完整可运行代码，确保光标仅在目标区域内显示、离开即隐藏。
本文详解为何自定义光标图像在 `mouseleave` 事件后仍不消失，并提供关键修复（`pointer-events: none`）及完整可运行代码，确保光标仅在目标区域内显示、离开即隐藏。
在实现基于 DOM 元素的自定义光标时，一个常见却易被忽视的问题是：光标图像在移出目标容器后依然可见。根本原因在于——自定义光标 <img> 元素默认会捕获鼠标事件，导致当鼠标从 .box 移出时，实际先经过了悬浮在其上方的 customCursor 图像本身，从而触发了 mouseleave 的“误判”：.box 的事件监听器未被正确触发，或触发后又被图像自身阻断。
解决方案的核心只有一行关键样式：
customCursor.style.pointerEvents = "none";
该声明使图像完全透明于鼠标交互，既不阻挡底层元素的事件传播，也不会自身触发 mouseenter/mouseleave，从而让 .box 的 mouseleave 事件能准确、可靠地响应鼠标离开区域的动作。
以下是修复后的完整、健壮的实现代码（含边界优化与性能建议）：
const box = document.querySelector(".box");
const customCursor = document.createElement("img");
// ✅ 关键修复：禁用 pointer-events，避免事件拦截
customCursor.style.pointerEvents = "none";
customCursor.style.position = "absolute";
customCursor.style.width = "175px";
customCursor.style.height = "175px";
customCursor.style.transform = "translate(-50%, -50%)"; // 更精准居中替代手动计算
customCursor.style.zIndex = "9999";
customCursor.src = "https://picsum.photos/175";
customCursor.style.display = "none";
document.body.appendChild(customCursor); // 推荐挂载到 body，避免父容器定位限制
// 使用 requestAnimationFrame 提升移动流畅性（可选优化）
let isInsideBox = false;
box.addEventListener("mouseenter", () => {
isInsideBox = true;
customCursor.style.display = "block";
});
box.addEventListener("mousemove", (e) => {
if (!isInsideBox) return;
customCursor.style.left = `${e.pageX}px`;
customCursor.style.top = `${e.pageY}px`;
});
box.addEventListener("mouseleave", () => {
isInsideBox = false;
customCursor.style.display = "none";
});
// ✅ 补充：防止页面滚动时光标错位（可选）
window.addEventListener("scroll", () => {
if (isInsideBox) {
customCursor.style.left = `${window.pageXOffset + pageX}px`;
customCursor.style.top = `${window.pageYOffset + pageY}px`;
}
});注意事项与最佳实践：
- ❌ 避免将 customCursor 添加到 .box 内部（如 box.appendChild(...)），否则其 position: absolute 会受 .box 的 overflow 或 transform 上下文影响；推荐直接挂载至 document.body。
- ✅ 使用 transform: translate(-50%, -50%) 替代手动减去宽高一半，语义更清晰且兼容缩放场景。
- ⚡ 对高频 mousemove 事件，可结合 requestAnimationFrame 或节流（throttle）进一步优化性能（本例已预留逻辑位置）。
- ? 若需支持多区域自定义光标，应封装为可复用函数，动态绑定/解绑事件。
通过添加 pointer-events: none 并合理组织 DOM 结构与事件流，即可实现真正符合直觉的“进入显示、离开隐藏”的自定义光标体验。
