按钮点击需要在移动设备上双击或长按
Button click requires double click or long-press on mobile
我正在尝试单击 React 应用程序中的按钮，虽然它在桌面上可以正常工作，但在移动设备上无法正常工作。我需要长按或双击，然后播放一点，直到按钮终于起作用。
我在这个 demo 中复制了我的问题。
如果您在桌面浏览器上打开该页面并尝试打开汉堡包菜单，它应该会立即打开。但是，如果您在手机中打开它，它不会立即起作用。您还会看到菜单在屏幕外有一点抖动。尝试通过单击叠加层关闭菜单在移动设备中存在同样的问题。
为什么这在移动设备上无法正常工作？如何让按钮在我点击时起作用？
看到这个有点相似 post 后，我将 cursor:pointer 添加到按钮，但这没有帮助。
我以前遇到过这个问题，我可以使用 onMouseDown 解决它，但这次没用，我猜是因为我使用的组件是从包 (react-burger-menu) 导入并且无法覆盖其 onClick 函数？我不确定发生了什么。
编辑：已解决。看我的回答。
事实证明，如果我修复了元素的堆叠，它就会起作用。我已将我的导航栏组件嵌套在 MapContainer 中，但这使移动端变得不稳定。我将我的组件移到 MapContainer 之外，一切正常。
我仍然不明白为什么它在移动端和 iOS 中变得不稳定，但这个问题至少是可以解决的。
固定示例为 here。
我的地图标记已被删除，因此您可以使用自己的标记来替代，但不需要显示地图即可看到problem/solution。
我正在尝试单击 React 应用程序中的按钮，虽然它在桌面上可以正常工作，但在移动设备上无法正常工作。我需要长按或双击，然后播放一点，直到按钮终于起作用。
我在这个 demo 中复制了我的问题。
如果您在桌面浏览器上打开该页面并尝试打开汉堡包菜单，它应该会立即打开。但是，如果您在手机中打开它，它不会立即起作用。您还会看到菜单在屏幕外有一点抖动。尝试通过单击叠加层关闭菜单在移动设备中存在同样的问题。
为什么这在移动设备上无法正常工作？如何让按钮在我点击时起作用？
看到这个有点相似 post 后，我将 cursor:pointer 添加到按钮，但这没有帮助。
我以前遇到过这个问题，我可以使用 onMouseDown 解决它，但这次没用，我猜是因为我使用的组件是从包 (react-burger-menu) 导入并且无法覆盖其 onClick 函数？我不确定发生了什么。
编辑：已解决。看我的回答。
事实证明，如果我修复了元素的堆叠，它就会起作用。我已将我的导航栏组件嵌套在 MapContainer 中，但这使移动端变得不稳定。我将我的组件移到 MapContainer 之外，一切正常。
我仍然不明白为什么它在移动端和 iOS 中变得不稳定，但这个问题至少是可以解决的。
固定示例为 here。
我的地图标记已被删除，因此您可以使用自己的标记来替代，但不需要显示地图即可看到problem/solution。