Microsoft Edge中touchmove事件未触发，拖拽元素位置检测失效

我之前也碰到过类似的情况，Edge对触摸事件的处理确实和Chrome有一些差异，尤其是桌面版Edge或者旧版本的EdgeHTML内核浏览器。下面给你几个可行的解决方案：

原因分析 #

• 触摸交互未激活：很多浏览器（包括Edge）需要先捕获touchstart事件，才会持续触发touchmove——如果没有先监听touchstart，touchmove可能不会被触发。
• 硬件/浏览器设置限制：桌面版Edge如果没有触摸设备，默认不会触发原生touch事件；旧版EdgeHTML内核对touch事件的支持不够完善。
• 缺少默认行为阻止：页面的滚动或缩放行为可能会干扰touch事件的触发，需要在事件中阻止默认行为。

方案1：修复原生touch事件的触发问题 #

先添加touchstart事件监听，确保触摸交互被激活，同时阻止默认行为避免干扰：

<div id="ele" style="position:absolute; top:0px; left:0px; width:100px;height:100px;border:1px solid"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  const ele = document.getElementById('ele');
  
  // 先监听touchstart，激活触摸会话
  ele.addEventListener('touchstart', function(e) {
    console.log('触摸已激活');
    e.preventDefault(); // 阻止页面滚动/缩放干扰
  });
  
  ele.addEventListener('touchmove', function(e) {
    console.log('touchmove事件触发！');
    // 获取触摸点的位置（注意touches是数组，取第一个触摸点）
    const touchPoint = e.touches[0];
    console.log(`位置：X=${touchPoint.clientX}, Y=${touchPoint.clientY}`);
    e.preventDefault();
  });
});
</script>

方案2：使用Pointer Events（推荐，兼容所有现代浏览器） #

Pointer Events是W3C标准的统一输入事件模型，能同时兼容触摸、鼠标、手写笔输入，完美解决Edge和Chrome的兼容问题，代码更简洁通用：

<div id="ele" style="position:absolute; top:0px; left:0px; width:100px;height:100px;border:1px solid"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  const ele = document.getElementById('ele');
  let isDragging = false; // 标记是否处于拖拽状态

  // 开始拖拽（对应touchstart/mousedown）
  ele.addEventListener('pointerdown', function(e) {
    isDragging = true;
    ele.setPointerCapture(e.pointerId); // 捕获指针，确保后续事件不丢失
    console.log('拖拽开始');
  });

  // 拖拽移动（对应touchmove/mousemove）
  ele.addEventListener('pointermove', function(e) {
    if (isDragging) {
      console.log('拖拽中...');
      console.log(`当前位置：X=${e.clientX}, Y=${e.clientY}`);
      // 这里可以添加拖拽逻辑，比如移动元素
      ele.style.left = `${e.clientX - 50}px`; // 50是元素宽度的一半，让中心点跟随指针
      ele.style.top = `${e.clientY - 50}px`;
      e.preventDefault();
    }
  });

  // 结束拖拽（对应touchend/mouseup）
  ele.addEventListener('pointerup', function(e) {
    isDragging = false;
    ele.releasePointerCapture(e.pointerId);
    console.log('拖拽结束');
  });

  // 处理意外中断（比如触摸被系统弹窗打断）
  ele.addEventListener('pointercancel', function(e) {
    isDragging = false;
    ele.releasePointerCapture(e.pointerId);
    console.log('拖拽意外中断');
  });
});
</script>

为什么推荐Pointer Events？ #

• 无需区分触摸和鼠标事件，一套代码适配所有输入设备
• 完美兼容Edge（包括新旧版本）、Chrome、Safari等所有现代浏览器
• setPointerCapture能避免拖拽过程中指针移出元素导致事件中断的问题

额外提示 #

如果是桌面版Edge测试触摸事件，没有触摸硬件的话，可以打开开发者工具（F12），点击右上角的三个点→更多工具→传感器，然后在"触摸"选项中勾选"启用触摸模拟"，这样就能用鼠标模拟触摸事件进行测试了。

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