延迟300毫秒覆盖React的OnClick事件

Question

在React应用程序中，我有几个组件实现了onClick处理程序。问题是我正在部署到iPad上的Safari，因此存在300毫秒的单击延迟。最好的方法是什么来消除这个延迟？是否可以覆盖React onClick监听器或类似的东西？我知道有几个存储库试图修复这个问题，但我不能添加新的方法，我只需要原始的onClick工作。我也知道react-fastclick，但它不适用于React 0.14

- dingdingding

Answer 1

300毫秒延迟是移动设备上普遍存在的javascript问题。这个链接提供了许多方法来解决它。这个链接告诉你如何绕过它。我成功地使用touchend事件取代了click，因为触摸事件没有延迟。

其他解决方法包括：

1. 通过添加meta标签<meta name="viewport" content="width=device-width, user-scalable=no">禁用缩放（Chrome和Firefox）。

2. 将视口设置为设备宽度（Chrome 32+）<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">

3. 使用这个非标准PointerEvents解决方案（适用于IE）

   a、button、.myelements { -ms-touch-action: manipulation; /* IE10 */ touch-action: manipulation; /* IE11+ */ }

- David Zorychta

---

谢谢提供链接，但我特别针对移动版Safari。 - dingdingding

你试过touchend吗？在Safari中，这些事件没有延迟。 - David Zorychta

你是在建议深入React onClick处理程序以添加touchend吗？问题在于，我不想绑定更多的处理程序。我只想全局扩展onClick功能，而不必编辑每个单独的文件。 - dingdingding

从iOS 9.3开始，<meta name="viewport" content="width=device-width">同样适用于Safari。 - jfbloom22