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被忽略，我的事件被调用两次。

显然，这可以通过嗅探触摸事件来解决，但网络充满了自我正确的咆哮，如何必须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。

非常令人失望。

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

1 个答案: