部分浏览器event.targetTouches报错，求全兼容的鼠标/触摸位置获取方案

问题 #

开发了一个带动量效果的自定义轮播组件，自用浏览器运行正常，但Sentry监测到部分Windows浏览器报错，报错指向代码行event.targetTouches[0].pageX，错误信息为：Cannot read properties of undefined (reading ‘0’)。已添加if("TouchEvent" in window)的判断来适配不支持targetTouches的浏览器，但报错仍存在。需要实现兼容所有浏览器的鼠标/触摸位置获取，或完善不支持浏览器的错误处理。当前获取位置的代码如下：

function getSwipeMousePosition(event) {
    if ('TouchEvent' in window) return {
       'x': event.pageX || event.targetTouches[0].pageX,
       'y': event.pageY || event.targetTouches[0].pageY
    };
}

解决方法 #

问题根源 #

1. 仅判断TouchEvent存在不严谨：有些带触控屏的Windows浏览器（如Chrome/Edge）支持TouchEvent，但触发的是鼠标事件而非触摸事件，此时event.targetTouches为undefined，直接取[0]会报错。
2. 当前函数未处理非触摸场景的返回值，调用方可能拿到undefined引发后续问题。

修复方案 #

修改函数逻辑，先判断事件类型再针对性获取坐标，同时做多层兜底：

function getSwipeMousePosition(event) {
    // 处理触摸事件：优先取targetTouches，无则取changedTouches
    if (event.type.startsWith('touch')) {
        const touch = event.targetTouches?.[0] || event.changedTouches?.[0];
        if (touch) {
            return {
                x: touch.pageX || 0,
                y: touch.pageY || 0
            };
        }
    }
    // 处理鼠标事件，兜底默认值0
    return {
        x: event.pageX || 0,
        y: event.pageY || 0
    };
}

额外优化建议 #

• 调用该函数的位置增加判空逻辑，避免极端情况引发连锁错误：

  const pos = getSwipeMousePosition(event);
  if (!pos || typeof pos.x !== 'number') return;
  // 执行后续轮播逻辑
  

内容的提问来源于stack exchange，提问作者Take your Backpack