Safari与Chrome中document.querySelector脚本执行结果不一致问题排查

核心问题分析 #

你的代码主要存在两个关键问题，导致Chrome滚动后图片定位异常：

1. 事件监听无法正确移除 #

不管是初始代码还是修改后的代码，都存在事件监听引用不匹配的问题：

• 初始代码中，addEventListener和removeEventListener使用的是完全独立的匿名函数，导致移除操作无效，pointermove监听会不断累积。
• 修改后的代码中，addEventListener传入的是包裹followMouse的匿名函数，但removeEventListener传入的是followMouse本身，两者不是同一个函数引用，同样无法移除监听。

当页面滚动后，累积的多个监听会同时修改图片位置，造成Chrome中的定位混乱，而Safari的事件处理机制可能对重复监听有隐式处理，所以表现正常。

2. 全局状态变量attached的逻辑缺陷 #

全局的attached变量如果遇到页面中有多个可悬停链接时，会导致第一个链接触发后，其他链接无法再次触发图片显示；同时如果异常触发多次showImage，会重复绑定监听，加剧定位问题。

修复后的完整代码 #

HTML（示例结构） #

<a href="#" onmouseover="showImage(this)" onmouseout="hideImage(this)">
  悬停显示图片
  <img src="your-image-url.jpg" alt="预览图">
</a>

JavaScript #

// 存储当前活跃的图片元素和对应的事件处理函数
let activeImage = null;
let activeMoveHandler = null;

const getElmtImage = (elmt) => elmt.querySelector("img");

function showImage(elmt) {
  const image = getElmtImage(elmt);
  if (!image || image === activeImage) return;

  // 先清理之前的监听（如果有）
  if (activeMoveHandler) {
    document.removeEventListener("pointermove", activeMoveHandler);
  }

  image.style.display = "block";
  // 创建绑定了当前image的处理函数，确保引用一致
  activeMoveHandler = (event) => {
    // 使用clientX/clientY，兼容性更好，对应fixed定位的视口坐标
    image.style.left = `${event.clientX}px`;
    image.style.top = `${event.clientY}px`;
  };
  document.addEventListener("pointermove", activeMoveHandler);
  activeImage = image;
}

function hideImage(elmt) {
  const image = getElmtImage(elmt);
  if (!image || image !== activeImage) return;

  image.style.display = "none";
  document.removeEventListener("pointermove", activeMoveHandler);
  // 重置状态
  activeImage = null;
  activeMoveHandler = null;
}

CSS（保持原有逻辑，可微调） #

img {
  position: fixed;
  display: none;
  pointer-events: none;
  width: 640px;
  height: auto;
  /* 可选：添加偏移，避免图片覆盖鼠标 */
  transform: translate(10px, 10px);
}

关键修复点说明 #

• 统一事件监听引用：将处理函数存储为变量activeMoveHandler，确保添加和移除时使用同一个函数引用，彻底解决监听累积问题。
• 状态管理优化：用activeImage跟踪当前显示的图片，避免多个链接之间的状态冲突，同时在切换图片时自动清理之前的监听。
• 使用clientX/clientY：和event.x/event.y功能一致，但兼容性更广，确保不同浏览器中视口坐标的计算一致。
• 添加可选偏移：通过transform给图片添加小偏移，避免图片直接覆盖鼠标指针，提升交互体验。

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