按钮点击需要在移动设备上双击或长按

如何解决按钮点击需要在移动设备上双击或长按

我正在尝试单击 React 应用程序中的按钮，虽然它可以在桌面上运行，但在移动设备上却无法正常运行。我需要长按或双击，然后播放一点直到按钮最终起作用。

我已在此 demo 中复制了我的问题。

如果您在桌面浏览器上打开页面并尝试打开汉堡菜单，它应该会立即打开。但是，如果您在移动设备中打开它，则无法立即使用。您还会在屏幕外看到菜单抖动。尝试通过点击覆盖关闭菜单在移动设备中也有同样的问题。

为什么这在移动设备上不能正常工作？当我点击按钮时，如何使其工作？

看到这个有点相似的 post 后，我向按钮添加了 cursor:pointer，但这没有帮助。

这个问题过去发生在我身上，我能够使用 onMouseDown 解决它，但这次它不起作用，我猜是因为我使用的是从一个包 (react-burger-menu) 并且不能覆盖它的 onClick 函数？我不确定发生了什么。

编辑：解决了。看我的回答。

解决方法

事实证明，如果我修复了元素的堆叠，它会起作用。我将导航栏组件嵌套在 MapContainer 中，但这使移动端变得不稳定。我将组件移到 MapContainer 之外，一切正常。

我仍然不明白为什么它在移动端和仅在 iOS 中变得不稳定，但这个问题至少是可以解决的。

固定示例为 here。

我的地图令牌已被移除，因此您可以使用您自己的地图令牌进行替换，但无需显示地图即可查看问题/解决方案。