响应桌面和移动设备中的touchstart和mousedown，而无需嗅探

Question

所以，我有一个问题。 我想对用户按下鼠标按钮（在桌面上）或触摸div（在移动设备上）做出回应。 我正在尝试与常绿的浏览器兼容。 这是我到目前为止尝试过的：

• 仅侦听mouseDown事件。 这适用于桌面设备，但如果用户拖动则不适用于移动设备。 我希望在用户触摸屏幕时立即调用处理程序，无论他们在过程中是否在移动手指。
• 仅touchStart事件。 此功能适用于移动设备和台式机，但Edge和Safari台式机除外，它们不支持触摸事件。
• 都听，然后preventDefault 。 这会在Chrome移动版上引起双重处理程序调用。 触摸事件似乎是被动的，它允许在移动Chrome上进行不间断的滚动，因此preventDefualt没有任何影响。 我得到的是一条警告消息，内容为： "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080" ，在控制台中将preventDefault忽略并我的活动叫了两次。

显然，这可以通过嗅探触摸事件来解决，但是网络上充满了自以为是的声音，说明人们必须如何与设备无关，并且在用户交互之前检测触摸事件很危险 。

因此，我想问题是：是否可以在不嗅探触摸事件的情况下做我想做的事情？

在我的示例React代码下面：

function handler(e) {
    console.log('handler called')
    e.preventDefault()
}

export default function MyElement() {
    return (
        <div
            onMouseDown={handler}
            onTouchStart={handler}
        >
        Hello
        </div>
    )
}

Answer 1

事实证明，在React中还不可能 。 一种解决方法是在第一次收到touchStart其设置为标志。

touchHandler = () => {
  this.useTouch = true
  this.realHandler()
}

mouseHandler = () => {
  if (this.useTouch) return
  this.realHandler()
}

请注意，在touchStart可能会丢失第一个touchStart 。

非常令人失望。