Javascript 在桌面和移动设备上响应touchstart和mousedown，无需嗅探

所以，我有个问题。我想回应用户按下鼠标按钮（在桌面上）或触摸div（在移动设备上）。我正在尝试与长青浏览器兼容。这就是我迄今为止所尝试的：

• 仅收听

  mouseDown

  事件。这在桌面上有效，但在移动设备上不起作用，如果用户正在拖动。我希望在用户触摸屏幕时立即调用处理程序，无论他们是否在过程中移动手指
• 仅收听

  touchStart

  事件。这适用于移动和桌面，但Edge和Safari桌面除外，它们不支持触摸事件
• 听这两个，然后

  preventDefault

  。这会导致Chrome mobile上的双重处理程序调用。触摸事件似乎是被动的，允许在移动Chrome上不间断地滚动，因此

  preventDefualt

  对它们没有影响。我得到的是一条警告消息，上面说，

  “[interference]无法在被动事件侦听器中防止默认值，因为目标被视为被动。请参阅https://www.chromestatus.com/features/5093566007214080“

  在控制台中，

  preventDefault

  被忽略，我的事件被调用两次

显然，这可以通过嗅探触摸事件来解决，但网络上充斥着自以为是的咆哮，关于一个人应该如何，以及如何

所以我想问题是：有没有一种方法可以在不嗅探触摸事件的情况下做我想做的事情

下面是我的示例代码：

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

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

函数处理程序（e）{
log（'handler called'）
e、 预防默认值（）
}
导出默认函数MyElement（）{
返回(
你好
)
}

结果是。一种解决方法是在首次接收到

touchStart

时设置一个标志

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

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

需要注意的是，如果拖动，第一个

touchStart

可能会丢失

非常令人失望。

结果是。一种解决方法是在首次接收到

touchStart

时设置一个标志

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

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

需要注意的是，如果拖动，第一个

touchStart

可能会丢失

相当令人失望