如果用户在按下按钮期间稍微移动手指，则使用“onClick”进行触摸点击会失败

Question

我有一个使用 React 的触摸显示屏。我有几个使用

onClick

事件的按钮，看起来像：

<button onClick={() => console.log('onClick')}>Hello!</button>

当我观察用户在触摸屏上使用此界面时，我注意到有时点击无法正确注册。用户会感到沮丧并用力按下按钮，这使得它记录的点击次数更少。

使用以下方法进行测试：

['touchstart', 'touchmove', 'touchend', 'touchcancel'].forEach((x) => window.addEventListener(x, () => console.log(x)))

我发现用户非常轻微地移动手指，足以触发

touchmove

事件。此

touchmove

事件有效地取消了点击，因为点击需要连续

touchstart

和

touchend

，而不需要

touchmove

。我尝试使用

 禁用 

touchmove

事件

window.addEventListener('touchmove', (e) => {e.preventDefault(); e.stopImmediatePropagation()}, {passive: false})

...但这并没有太大影响。

我可以重构我的代码以使用

onTouchEnd

和

onMouseUp

但这看起来很麻烦。有没有一种方法可以更好地处理触摸设备的

onClick

事件？有没有办法覆盖

onClick

的行为，以便它忽略

touchmove

事件？

---

编辑：这是 Chrome 开发工具的截屏示例：

截屏：https://imgur.com/qMZFdxl

现场演示：https://jsfiddle.net/Lwoact9u/2/

它似乎只发生在 Chrome 中，而不是 Firefox 中。我不确定其他浏览器是否如此。

Answer 1

如果只有一两个按钮，那么你可以管理类似的变量

let confirmClick = false

和按钮

onTouchMove={() => confirmClick = true;}
onTouchEnd={() => {
if(confirmClick){
confirmClcik = false;
// do your work here
}
}}

确认单击触摸移动而不是触摸启动，以便在正常流程（无触摸移动）功能中不会调用两次。