如何检测基于触摸的pointerenter事件？触摸设备为何偶现pointerType=mouse？

为什么触摸设备会收到pointerType="mouse"的pointerenter事件？ #

• 系统触摸模拟逻辑：不少触控设备（比如触控笔记本、部分安卓平板）为了兼容传统非触控网页，会在触摸操作后自动模拟鼠标事件。这种模拟机制偶尔会导致Pointer Event的pointerType被错误标记为mouse，尤其是触摸后短时间内的后续事件触发时。
• 硬件/驱动误识别：部分触控硬件的驱动在处理边缘触摸、快速连续操作时，可能会把触摸输入错误归类为鼠标事件，浏览器接收到后就会呈现出pointerType="mouse"的结果。
• 浏览器实现差异：不同浏览器对Pointer Event标准的细节实现有区别，旧版本浏览器或小众移动端浏览器可能没有正确将触摸输入映射到pointerType="touch"，导致类型误判。

可靠检测事件真实来源的方法 #

• 结合触摸事件兜底记录输入状态：
  同时监听touchstart和mouseenter事件，维护一个记录最近输入类型的变量，在处理pointerenter时结合该变量和事件本身的pointerType判断真实来源。代码示例：

  let lastInputSource = null;
  
  // 监听触摸起始事件，标记最近输入为触摸
  document.addEventListener('touchstart', () => {
    lastInputSource = 'touch';
  }, { passive: true });
  
  // 监听真实鼠标进入事件，标记最近输入为鼠标
  document.addEventListener('mouseenter', () => {
    lastInputSource = 'mouse';
  });
  
  // 处理pointerenter事件时综合判断
  document.addEventListener('pointerenter', (e) => {
    const realInputType = lastInputSource || e.pointerType;
    // 用realInputType执行你的业务逻辑
  });
  

• 结合设备触摸能力判断：
  先通过navigator.maxTouchPoints > 0判断设备是否支持触摸，如果支持，当pointerType为mouse但近期有触摸操作记录时，优先判定为触摸来源。
• 多事件交叉验证：
  不要仅依赖pointerenter事件，结合pointerdown、pointermove等事件的pointerType进行交叉验证——通常pointerdown能更准确反映真实输入类型，因为模拟的鼠标事件很少会触发pointerdown。

React框架下的说明 #

React只是对原生DOM事件做了封装转发，不会修改pointerType的原始值，所以你遇到的问题确实源于原生事件层面，上述解决方案完全适用。

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