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

Question

所以，我有一个问题。我想响应用户按下鼠标按钮(在桌面上)或触摸 div(在移动设备上)。我正在尝试与常青浏览器兼容。这是我到目前为止尝试过的:

• 仅监听 mouseDown 事件。这适用于桌面设备，但如果用户拖动，则不适用于移动设备。我希望用户触摸屏幕后立即调用处理程序，无论他们在此过程中是否移动手指。
• 仅监听 touchStart 事件。这适用于移动设备和桌面设备，但 Edge 和 Safari 桌面设备除外，因为它们不支持触摸事件。
• 听取两者，然后preventDefault。这会导致 Chrome 移动设备上出现双重处理程序调用。触摸事件似乎是被动的，以允许在移动 Chrome 上不间断滚动，因此 preventDefualt 对它们没有影响。我收到的是一条警告消息，内容为 “[Intervention] 由于目标被视为被动，因此无法阻止被动事件监听器内的默认行为。请参阅 https://www.chromestatus.com/features/5093566007214080”控制台，preventDefault 被忽略，我的事件被调用两次。

显然，这可以通过嗅探触摸事件来解决，但网络上充斥着关于人们必须如何做的自以为是的咆哮device-agnostic那it's dangerous to detect touch events before the user interacted .

所以我想问题是:有没有办法在不嗅探触摸事件的情况下做我想做的事情？

下面是我的示例 React 代码:

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

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

Answer 1

结果it's not yet possible in React 。一种解决方法是在第一次收到 touchStart 时设置一个标志。

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

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

需要注意的是，如果拖动，第一个 touchStart 可能会丢失。

相当令人失望。