响应在桌面和移动touchstart和mousedown，没有嗅探

问题描述：

所以，我有一个问题。我想响应用户按下鼠标按钮（在桌面上）或触摸div（在手机上）。我试图与常青的浏览器保持一致。这是我到目前为止所尝试的：响应在桌面和移动touchstart和mousedown，没有嗅探

只听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。

所以我想问题是：有没有办法做我想做的事情，而不嗅探触摸事件？

我下面的样本反应代码：

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

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

答

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

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

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

需要提醒的是，第一touchStart可拖动的情况下丢失。

非常令人失望。

响应在桌面和移动touchstart和mousedown，没有嗅探

相关推荐