如何获取相对于目标元素的光标位置且忽略子元素及干扰元素？

方案1：通过坐标计算直接获取相对于目标元素的位置 #

核心思路是利用getBoundingClientRect()获取目标元素的视口位置，结合鼠标的视口坐标clientX/Y计算出相对于目标元素的位置，完全不受子元素影响：

document.querySelectorAll(".parallax").forEach((parallax) => {
  document.addEventListener("mousemove", (e) => {
    // 获取.parallax元素在视口中的边界信息
    const elementRect = parallax.getBoundingClientRect();
    
    // 计算鼠标相对于元素左上角的坐标（无视子元素）
    const xFromElementLeft = e.clientX - elementRect.left;
    const yFromElementTop = e.clientY - elementRect.top;
    
    // 转换为相对于元素中心的坐标
    const x = xFromElementLeft - parallax.innerWidth / 2;
    const y = yFromElementTop - parallax.innerHeight / 2;
    
    // 这里执行你的视差逻辑
    console.log("相对于中心的坐标：", x, y);
  });
});

补充：仅在鼠标悬停目标元素时计算 #

如果只需要在鼠标落在.parallax元素上时才计算位置，可以添加范围判断：

document.querySelectorAll(".parallax").forEach((parallax) => {
  document.addEventListener("mousemove", (e) => {
    const elementRect = parallax.getBoundingClientRect();
    
    // 判断鼠标是否在目标元素范围内
    const isMouseOverElement = 
      e.clientX >= elementRect.left && 
      e.clientX <= elementRect.right && 
      e.clientY >= elementRect.top && 
      e.clientY <= elementRect.bottom;
    
    if (!isMouseOverElement) return;
    
    const xFromElementLeft = e.clientX - elementRect.left;
    const yFromElementTop = e.clientY - elementRect.top;
    const x = xFromElementLeft - parallax.innerWidth / 2;
    const y = yFromElementTop - parallax.innerHeight / 2;
    
    console.log("相对于中心的坐标：", x, y);
  });
});

方案2：利用CSS事件穿透简化代码 #

给.parallax的所有子元素设置pointer-events: none，让鼠标事件直接穿透子元素触发在父元素上，此时使用offsetX/Y就能直接得到相对于.parallax的位置：

第一步：添加CSS样式 #

.parallax > * {
  pointer-events: none;
}

第二步：修改JS代码 #

直接给.parallax元素绑定事件，此时offsetX/Y不会受子元素干扰：

document.querySelectorAll(".parallax").forEach((parallax) => {
  parallax.addEventListener("mousemove", (e) => {
    const x = e.offsetX - parallax.innerWidth / 2;
    const y = e.offsetY - parallax.innerHeight / 2;
    
    console.log("相对于中心的坐标：", x, y);
  });
});

方案对比 #

• 坐标计算法：无需修改页面样式，灵活度高，适合不能改动现有CSS的场景。
• CSS穿透法：代码更简洁直观，适合允许修改子元素样式的场景。

内容的提问来源于stack exchange，提问作者Hazrd