W3Schools图片放大镜效果在移动端失效的解决求助

嗨，我刚碰到过一模一样的问题！你的代码其实已经考虑到了移动端触摸事件，但有两个关键细节没处理到位，调整一下就能解决：

问题1：触摸事件的坐标没正确获取 #

原代码的getCursorPos函数只适配了鼠标事件的坐标逻辑，可移动端触摸事件的坐标数据存在e.touches[0]对象里，直接用e.pageX拿不到正确值。修改这个函数：

function getCursorPos(e) {
  var a, x = 0, y = 0;
  e = e || window.event;
  // 区分触摸/鼠标事件，拿到正确的坐标源
  const inputEvent = e.touches ? e.touches[0] : e;
  
  a = img.getBoundingClientRect();
  // 用inputEvent代替原e来获取坐标
  x = inputEvent.pageX - a.left;
  y = inputEvent.pageY - a.top;
  x = x - window.pageXOffset;
  y = y - window.pageYOffset;
  return {x : x, y : y};
}

问题2：触摸事件的默认行为无法被阻止 #

移动端浏览器会默认把touchmove事件设为被动监听，这会导致你代码里的e.preventDefault()失效，页面可能出现滚动、缩放，直接干扰放大镜效果。所以添加触摸事件监听时要显式关闭被动模式：

// 替换你代码里的触摸事件监听代码
glass.addEventListener("touchmove", moveMagnifier, { passive: false });
img.addEventListener("touchmove", moveMagnifier, { passive: false });

额外小优化（可选） #

为了适配移动端屏幕，可以把放大镜的大小改成相对单位，比如用vw代替固定像素：

.img-magnifier-glass {
  /* 其他样式不变 */
  width: 40vw;
  height: 40vw;
}

把这几个地方改完后，安卓Chrome上应该就能正常触发放大镜效果了，你可以试试~

内容来源于stack exchange