三星平板外接键盘时Pointer Events异常的解决方案求助

是否为已知问题 #

这是三星浏览器在平板外接触控板场景下的已知兼容性问题，属于浏览器对Pointer Events规范的实现偏差。该场景下，浏览器错误地将触控板输入识别为触摸事件，随后又触发鼠标事件，导致事件序列混乱；而iPad上的浏览器对混合输入设备的事件识别逻辑更符合标准规范。

推荐解决方法 #

由于需要同时支持鼠标和触屏操作，不能直接屏蔽某类事件，可通过以下方式过滤误触发事件：

• 基于时间戳+事件类型的过滤：维护一个全局的事件时间戳记录，当触发pointerEnter事件时，若当前事件类型为mouse，且距离上一次touch类型的同元素事件触发时间小于200ms（阈值可根据实际交互调整），则忽略本次mouse事件。示例代码：

  const lastTouchTime = useRef({});
  
  const handlePointerEnter = (e) => {
    const elementKey = e.target.dataset.eventKey; // 用自定义属性标识元素
    const nativeEvent = e.nativeEvent;
    const currentTime = Date.now();
  
    if (nativeEvent.pointerType === 'mouse') {
      // 过滤短时间内跟随touch事件的mouse事件
      if (lastTouchTime.current[elementKey] && currentTime - lastTouchTime.current[elementKey] < 200) {
        return;
      }
    } else if (nativeEvent.pointerType === 'touch') {
      lastTouchTime.current[elementKey] = currentTime;
    }
  
    // 执行正常交互逻辑
    console.log('有效事件类型:', nativeEvent.pointerType);
  };
  
  <button data-event-key="test-btn" onPointerEnter={handlePointerEnter}>
    I'm a button
  </button>
  

• 利用Pointer事件属性辅助判断：真实触摸事件的pressure通常大于0，而触控板模拟的touch事件pressure可能为0；结合这一特性过滤疑似误触发的事件：

  const handlePointerEnter = (e) => {
    const nativeEvent = e.nativeEvent;
    // 过滤压力为0的touch事件（大概率是触控板模拟）
    if (nativeEvent.pointerType === 'touch' && nativeEvent.pressure === 0) {
      return;
    }
    // 正常处理逻辑
    console.log(nativeEvent.pointerType);
  };
  

• 针对三星浏览器做特定兼容：通过navigator.userAgent检测三星浏览器，在该环境下调整事件优先级，比如优先处理mouse类型事件，对touch事件做额外校验：

  const isSamsungBrowser = /SamsungBrowser/i.test(navigator.userAgent);
  
  const handlePointerEnter = (e) => {
    const nativeEvent = e.nativeEvent;
    if (isSamsungBrowser && nativeEvent.pointerType === 'touch') {
      // 额外校验：排除无压力的touch事件
      if (nativeEvent.pressure === 0) return;
    }
    // 执行交互逻辑
  };
  

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