iOS 叠加层中的按钮触发对叠加层下方元素的额外点击

Question

我在 iOS 台设备上遇到了一个奇怪的问题。

单击覆盖容器中的 buttons/links 时，下面的元素也会触发单击事件。我有一个“过滤器”按钮，可以打开一个覆盖 div 的所有过滤器选项。叠加层上的关闭按钮直接位于触发叠加层的按钮上方。当我点击关闭按钮时，叠加层关闭，稍有延迟，再次点击过滤器按钮并打开叠加层。

这也发生在我构建我的移动菜单时，我在右上角有一个汉堡按钮，可以打开我的移动菜单。关闭按钮位于汉堡按钮所在的位置。单击关闭按钮时，再次执行汉堡按钮的单击并打开菜单。

我尝试将 stopImmediatePropagation() 绑定到按钮，但这行不通。这只发生在 iOS、Android 和桌面上。叠加层的功能来自我使用的电子商务系统 (Shopware 6)。它不仅发生在按钮上，还发生在其他元素上，例如 divs 和具有 hide/close 覆盖功能的跨度。

有什么办法可以解决这个问题吗？

此致， 亚历克斯

Answer 1

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

不是设计的目的，但幸运的是它解决了 iOS 上的点击问题。