React+TypeScript中e.changedTouches所属类型及代码错误修复求助

代码错误修复 #

你的代码存在两个核心问题，以下是针对性修复方案：

1. 事件类型范围过宽 #

原函数使用React.SyntheticEvent<HTMLDivElement>作为事件类型，无法让TypeScript正确推断pageX（鼠标事件属性）和changedTouches（触摸事件属性）的类型。需要将事件类型指定为鼠标事件与触摸事件的联合类型。

2. 事件类型判断逻辑错误 #

函数用于处理按下触发的事件（mousedown/touchstart），但你判断的是touchmove，这会导致触摸按下时的逻辑无法触发。

修复后的完整代码：

function onMouseTouchDown(e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) {
    e.preventDefault()
    setDown(true)

    if ('changedTouches' in e) {
      // 类型守卫：确认当前为触摸事件
      setX(e.changedTouches[0].pageX - e.currentTarget.offsetLeft)
    } else {
      // 自动推断为鼠标事件
      setX(e.pageX - e.currentTarget.offsetLeft)
    }

    setScrollLeft(e.currentTarget.scrollLeft)
}

说明：

• 使用'changedTouches' in e作为类型守卫，比判断e.type更简洁可靠，TypeScript会自动识别事件类型并提供正确的属性提示
• 联合类型React.MouseEvent | React.TouchEvent确保能访问两种事件的专属属性

React+TypeScript中changedTouches的所属事件类型 #

changedTouches是触摸事件特有的属性，仅存在于React.TouchEvent<T>类型的事件对象中，对应的触发场景包括：

• touchstart：触摸元素时触发
• touchmove：触摸过程中移动时触发
• touchend：触摸离开元素时触发
• touchcancel：触摸操作被系统中断时触发

该属性是一个TouchList集合，存储了当前事件中状态发生变化的触摸点详细信息。

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