本文详解如何通过添加 pointer-events: none 解决自定义光标图像在离开目标区域后不消失的问题，确保光标仅在指定容器内显示且交互行为不受干扰。
本文详解如何通过添加 pointer-events: none 解决自定义光标图像在离开目标区域后不消失的问题，确保光标仅在指定容器内显示且交互行为不受干扰。
在实现自定义光标效果时，一个常见误区是：虽然为容器绑定了 mouseenter/mouseleave 或 mousemove/mouseleave 事件，并正确控制了自定义 元素的显隐，但光标离开区域后仍“卡住”不消失。根本原因在于——自定义光标图片本身会拦截鼠标事件。
当 元素被动态插入到 .box 内并随鼠标移动时，它实际覆盖在 DOM 上层。一旦鼠标移出 .box 边界，却意外划过该
自身，此时 mouseleave 事件便无法被 .box 正确触发（因为鼠标并未真正“离开容器”，而是进入了其子元素），导致 display: none 永远不会执行。
✅ 正确解法：为自定义光标元素显式设置 pointer-events: none：
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.src = "https://picsum.photos/175";
customCursor.style.display = "none";
box.appendChild(customCursor);
box.addEventListener("mousemove", (e) => {
customCursor.style.display = "block";
// 使用 getBoundingClientRect() 更健壮（推荐用于跨 iframe 或缩放场景）
const rect = box.getBoundingClientRect();
const x = e.clientX - rect.left - customCursor.width / 2;
const y = e.clientY - rect.top - customCursor.height / 2;
customCursor.style.left = `${x}px`;
customCursor.style.top = `${y}px`;
});
box.addEventListener("mouseleave", () => {
customCursor.style.display = "none";
});
⚠️ 注意事项：
- pointer-events: none 是必须项，不可省略；它让光标图片“透明化”于鼠标事件流，确保 .box 能准确感知鼠标进出。
- 建议使用 clientX/clientY + getBoundingClientRect() 计算位置，而非 pageX/pageY，避免滚动或页面偏移导致定位偏差。
- 若需支持多区域自定义光标，应为每个区域独立创建光标元素并绑定对应事件，避免全局冲突。
- 可进一步优化：添加 transition: opacity 0.2s 实现淡入淡出效果，提升视觉体验。
总结：自定义光标的核心逻辑不仅是“显示与隐藏”，更是事件委托的精确控制。pointer-events: none 是连接 DOM 结构与事件流的关键桥梁——它确保视觉元素不干扰交互逻辑，让 mouseleave 真正“生效”。
