Chrome与Safari中太阳系网页游戏行星瞬移问题修复求助

现象确认 #

• 游戏在Safari中运行正常，Chrome中点击鼠标时，特定行星（div包裹img）会瞬移到地球div附近
• 仅行星的style.left值异常变更，style.top无变动；velocity数组数值未发生变化
• 瞬移仅触发一次，再次点击鼠标后行星位置恢复正常

根因分析（Chrome与Safari事件监听差异） #

Chrome和Safari在鼠标事件处理上的核心差异点：

1. 坐标计算逻辑：Chrome对clientX/clientY的取值会受元素定位父级影响，而Safari严格遵循文档基准的坐标计算
2. 事件目标识别：如果点击事件采用委托绑定，Chrome可能错误将地球div识别为事件触发目标，导致坐标计算以地球为基准
3. 定位属性默认行为：未显式设置position的元素，Chrome会自动继承父级偏移计算style.left，Safari则保持独立文档坐标

具体修复步骤 #

1. 统一鼠标坐标获取逻辑 #

放弃依赖clientX/clientY，改用pageX/pageY确保基于文档的绝对坐标，避免滚动或父级定位干扰：

document.addEventListener('click', (e) => {
  const targetPlanet = document.getElementById('mars'); // 替换为你的目标行星ID
  // 计算行星中心对齐点击位置的坐标
  const targetLeft = e.pageX - targetPlanet.offsetWidth / 2;
  const targetTop = e.pageY - targetPlanet.offsetHeight / 2;
  
  // 强制行星为绝对定位，避免继承父级偏移
  targetPlanet.style.position = 'absolute';
  targetPlanet.style.left = `${targetLeft}px`;
  targetPlanet.style.top = `${targetTop}px`;
});

2. 拦截事件委托中的干扰元素 #

如果点击事件绑定在游戏容器上，添加目标校验，排除地球元素的点击干扰：

const gameContainer = document.getElementById('solar-system-container');
gameContainer.addEventListener('click', (e) => {
  // 点击地球时直接返回，不执行行星移动逻辑
  if (e.target.closest('#earth')) return;
  
  // 仅处理行星或空白区域的点击
  if (e.target.closest('.planet') || e.target === gameContainer) {
    updatePlanetPos(e.pageX, e.pageY);
  }
});

function updatePlanetPos(x, y) {
  const planet = document.getElementById('mars');
  planet.style.left = `${x - planet.offsetWidth/2}px`;
  planet.style.top = `${y - planet.offsetHeight/2}px`;
}

3. 强制锁定行星定位上下文 #

给所有行星元素添加显式的CSS定位规则，覆盖浏览器默认行为：

.planet {
  position: absolute !important;
  transform: translate(-50%, -50%); /* 用transform实现居中，避免left/top计算偏差 */
}

4. 同步velocity数组与实际坐标 #

虽然velocity数组数值无变化，但Chrome可能存在隐式坐标重置，每次点击前同步行星当前位置到velocity：

function updatePlanetPos(x, y) {
  const planet = document.getElementById('mars');
  // 同步当前实际位置到velocity数组
  velocity[0] = planet.offsetLeft;
  velocity[1] = planet.offsetTop;
  
  const targetLeft = x - planet.offsetWidth/2;
  const targetTop = y - planet.offsetHeight/2;
  
  planet.style.left = `${targetLeft}px`;
  planet.style.top = `${targetTop}px`;
}

验证方法 #

1. Chrome中点击任意位置，检查行星是否不再瞬移到地球附近
2. 查看行星的style.left和style.top是否均正常更新
3. 多次点击同一位置，确认velocity数组与行星坐标保持一致

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