本文详解如何通过 JavaScript 监听 mouseenter/mouseleave 事件，动态调整自定义圆形光标在指定 DOM 区域（如图片容器）上的缩放比例，解决因误用 MouseEvent 导致的事件失效问题。
本文详解如何通过 javascript 监听 `mouseenter`/`mouseleave` 事件，动态调整自定义圆形光标在指定 dom 区域（如图片容器）上的缩放比例，解决因误用 `mouseevent` 导致的事件失效问题。
实现精准可控的自定义光标交互，关键在于正确选择事件类型与作用域。原代码中使用了不存在的 'MouseEvent' 字符串作为事件名（addEventListener('MouseEvent', ...)），这会导致监听完全失效——浏览器无法识别该事件，自然不会触发缩放逻辑。
正确的做法是：为需要响应光标变化的目标元素（如 .cursorHover 区域）绑定 mouseenter 和 mouseleave 事件。前者在鼠标进入时放大光标，后者在离开时恢复默认状态。同时需确保 .cursor 元素已存在于 DOM 中（建议置于 <body> 顶部），并保持其 position: absolute 与 pointer-events: none 属性，以避免干扰页面交互。
以下是可直接运行的优化代码示例：
<div class="cursor"></div>
<script>
const cursor = document.querySelector('.cursor');
// 跟踪全局鼠标移动
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.pageX + 'px';
cursor.style.top = e.pageY + 'px';
});
// 为特定区域绑定悬停事件
const hoverSection = document.querySelector('.cursorHover');
if (hoverSection) {
hoverSection.addEventListener('mouseenter', () => {
cursor.style.transform = 'translate(-50%, -50%) scale(6)';
});
hoverSection.addEventListener('mouseleave', () => {
cursor.style.transform = 'translate(-50%, -50%) scale(0.9)';
});
}
</script>
<style>
.cursor {
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
user-select: none;
pointer-events: none;
mix-blend-mode: difference;
transform: translate(-50%, -50%) scale(0.9);
z-index: 9999;
transition: transform 0.2s ease; /* 添加平滑过渡更专业 */
}
.cursorHover {
display: inline-block; /* 确保区域有明确尺寸 */
}
/* 示例背景色，便于视觉验证 */
.cursorHover { background-color: #f0f9ff; padding: 1rem; }
</style>
<section class="cursorHover">
<img loading="lazy" src="imgs/im/Vector.png" alt="Hover target" class="img mt-4" />
</section>注意事项：
- ✅ 必须提前在 HTML 中声明 <div class="cursor"></div>，否则 querySelector 返回 null；
- ✅ 使用 translate(-50%, -50%) 配合 scale()，确保缩放以光标中心为基准，避免偏移；
- ✅ 推荐添加 transition: transform 0.2s ease 实现缩放动画，提升用户体验；
- ❌ 避免使用无效事件名（如 'MouseEvent'），标准事件名应为 'mouseenter'、'mouseleave'、'mousemove' 等；
- ⚠️ 若页面存在滚动，需将 e.pageX/e.pageY 替换为 e.clientX/e.clientY 并配合 getBoundingClientRect() 处理视口定位（进阶场景）。
通过以上结构化实现，即可稳定、高效地为任意 DOM 区域赋予差异化光标反馈，为现代网页交互设计提供灵活支持。
