按鈕單擊需要在移動設備上雙擊或長按

Question

我正在嘗試單擊 React 應用程序中的按鈕，雖然它在桌面上工作，但在移動設備上無法正常工作。 我需要長按或雙擊，然后播放一點，直到按鈕最終起作用。

我在這個演示中復制了我的問題。

如果您在桌面瀏覽器上打開頁面並嘗試打開漢堡菜單，它應該會立即打開。 但是，如果您在手機中打開它，它將無法立即使用。 您還會在屏幕外看到菜單抖動。 嘗試通過單擊覆蓋來關閉菜單在移動設備中存在相同的問題。

為什么這在移動設備上無法正常工作？ 當我點擊它時，如何讓按鈕工作？

在看到這個有點相似的帖子后，我添加了cursor:pointer to the button ，但這並沒有幫助。

這個問題過去曾發生在我身上，我可以使用onMouseDown解決它，但這次它不起作用，我猜是因為我使用的是從 package 導入的組件（ react-burger-menu ) 並且不能覆蓋它的onClick function？ 我不確定發生了什么。

編輯：解決。 看我的回答。

Answer 1

事實證明，如果我修復元素的堆疊，它會起作用。 我已經將導航欄組件嵌套在 MapContainer 中，但這使得移動端的事情變得不穩定。 我將組件移到 MapContainer 之外，一切正常。

我仍然不明白為什么它在移動端和 iOS 中變得不穩定，但至少這個問題是可以解決的。

固定示例在這里。

我的 map 令牌已被刪除，因此您可以使用自己的令牌進行替換，但不必顯示 map 以查看問題/解決方案。