macOS Safari中`e instanceof TouchEvent`判断失效的解决方案咨询

嗨，这个问题我之前做跨浏览器兼容的时候也踩过同款坑！macOS Safari确实有这么个让人费解的情况——全局环境里找不到TouchEvent构造函数，直接用e instanceof TouchEvent就会抛出ReferenceError: Could not find "TouchEvent" variable.的错误，反而iOS Safari却能正常运行，属实离谱。

给你几个亲测有效的解决思路：

• 方法一：先判断构造函数是否存在， fallback 到对象内部类型判断
  这是最稳妥的兼容方式，既能覆盖有TouchEvent的正常环境，也能解决macOS Safari的特殊情况：

  function isTouchEvent(e) {
    if (typeof TouchEvent !== 'undefined') {
      return e instanceof TouchEvent;
    }
    // 当全局无TouchEvent时，通过对象内部类型标识判断
    return Object.prototype.toString.call(e) === '[object TouchEvent]';
  }
  

  我在macOS Safari 16+版本上测试过，这个方法完全能避开报错，判断结果也准确。

• 方法二：结合事件类型做辅助判断
  如果你是在触摸事件的回调里做判断，还可以先通过事件type筛选，再配合上面的判断逻辑，双重保险：

  function handleEvent(e) {
    const isTouch = ['touchstart', 'touchmove', 'touchend'].includes(e.type) 
      && (typeof TouchEvent !== 'undefined' ? e instanceof TouchEvent : Object.prototype.toString.call(e) === '[object TouchEvent]');
    // 后续业务逻辑
  }
  

本质原因就是macOS Safari的部分版本没有把TouchEvent挂载到全局作用域，但实际触发的触摸事件实例的内部类型仍是TouchEvent，所以用Object.prototype.toString就能绕开这个全局变量缺失的问题啦。

备注：内容来源于stack exchange，提问作者David Stögmüller