iOS 疊加層中的按鈕會觸發對疊加層下方元素的額外點擊

Question

我在 iOS 設備上遇到了一個奇怪的問題。

單擊覆蓋容器中的按鈕/鏈接時，下面的元素也會觸發單擊事件。 我有一個“過濾器”按鈕，可以打開一個包含所有過濾器選項的覆蓋 div。 疊加層上的關閉按鈕直接位於觸發疊加層的按鈕上方。 當我點擊關閉按鈕時，疊加層關閉，稍有延遲，再次點擊過濾器按鈕並打開疊加層。

這也發生在我構建我的移動菜單時，我在右上角有一個漢堡按鈕，可以打開我的移動菜單。 關閉按鈕位於漢堡按鈕所在的位置。 單擊關閉按鈕時，將再次執行漢堡按鈕的單擊並打開菜單。

我試圖將 stopImmediatePropagation() 綁定到按鈕，但這行不通。 這只發生在 iOS、Android 和桌面上。 疊加層的功能來自我使用的電子商務系統 (Shopware 6)。 它不僅發生在按鈕上，也發生在其他元素上，例如 div 和具有隱藏/關閉覆蓋功能的跨度。

任何想法如何擺脫這個？

最好的問候，亞歷克斯

Answer 1

我可以用 fastclick.js 解決它https://github.com/ftlabs/fastclick

不是為了什么而設計的，但幸運的是它解決了 iOS 上的點擊問題。