如何做到自定义光标在区域外自动隐藏

本文详解如何通过添加 pointer-events: none 解决自定义光标图像在离开目标区域后不消失的问题，确保光标仅在指定容器内显示且交互行为不受干扰。

本文详解如何通过添加 pointer-events: none 解决自定义光标图像在离开目标区域后不消失的问题，确保光标仅在指定容器内显示且交互行为不受干扰。

在实现自定义光标效果时，一个常见误区是：虽然为容器绑定了 mouseenter/mouseleave 或 mousemove/mouseleave 事件，并正确控制了自定义 <img> 元素的显隐，但光标离开区域后仍“卡住”不消失。根本原因在于——自定义光标图片本身会拦截鼠标事件。

当 <img> 元素被动态插入到 .box 内并随鼠标移动时，它实际覆盖在 DOM 上层。一旦鼠标移出 .box 边界，却意外划过该 <img> 自身，此时 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 真正“生效”。