如何在IE与Edge中实现Touch Events？解决触摸事件被UI拦截问题

我之前也踩过微软系浏览器触摸事件的坑，旧版Edge和IE对触摸事件的处理逻辑确实和Chrome、Firefox差异很大。针对你遇到的问题，分享几个可行的解决方案，重点覆盖Edge的修复需求：

1. 优先用Pointer Events替代Touch Events #

IE10+和全版本Edge都原生支持Pointer Events——这是微软主导的统一输入事件标准，能同时兼容触摸、鼠标、手写笔输入，比单独的Touch Events在微软系浏览器里兼容性好太多。

具体改造步骤：

• 把事件监听从touchstart/touchmove/touchend替换成pointerdown/pointermove/pointerup
• 不需要再依赖e.changedTouches[0]，直接用e对象本身获取坐标（比如e.clientX/e.clientY）
• 给目标SVG元素添加CSS属性：touch-action: none;，这是核心——它明确告诉浏览器不要对该元素执行默认触摸行为（比如滚动、缩放），确保事件能传递到你的DOM元素
• 在事件处理函数里调用e.preventDefault()（旧版IE可以额外加e.returnValue = false做兼容）

举个改造后的代码片段：

svg {
  touch-action: none;
  user-select: none;
  -ms-user-select: none;
}

const svg = document.querySelector('svg');
let isDrawing = false;
let lastPoint;

svg.addEventListener('pointerdown', function(e) {
  isDrawing = true;
  lastPoint = { x: e.clientX, y: e.clientY };
  e.preventDefault();
});

svg.addEventListener('pointermove', function(e) {
  if (!isDrawing) return;
  // 你的绘制逻辑：用lastPoint和当前坐标生成路径
  lastPoint = { x: e.clientX, y: e.clientY };
  e.preventDefault();
});

svg.addEventListener('pointerup', function(e) {
  isDrawing = false;
  e.preventDefault();
});

2. 旧版Edge的额外兼容技巧 #

如果还需要兼容非Chromium内核的旧版Edge，可以试试这两个调整：

• 在捕获阶段监听事件：给addEventListener加上第三个参数true，让事件在捕获阶段就被拦截，避免浏览器UI先拿到事件：

svg.addEventListener('touchmove', function(e) {
  e.preventDefault();
  e.returnValue = false;
  // 绘制逻辑
}, true);

• 检查元素可交互区域：确保SVG元素有足够的宽高，没有被其他透明元素覆盖——旧Edge有时候会因为元素可点击区域的问题吞掉触摸事件。

为什么之前的event.returnValue = false没用？ #

单独设置returnValue不足以阻止微软浏览器的默认触摸行为，因为浏览器会优先处理滚动、缩放这类UI级别的触摸操作。必须配合touch-action: none明确禁用浏览器的默认触摸处理，再加上preventDefault()，才能让事件顺利传递到你的DOM元素中。

亲测用Pointer Events+touch-action: none的方案，在新版Chromium Edge和旧版Edge里都能正常触发触摸绘图，你可以把这个方案套用到你的示例里试试。

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