iPadOS 15 Safari on.('touchend') 问题答案

【问题标题】：iPadOS 15 Safari on.('touchend') issuesiPadOS 15 Safari on.('touchend') 问题
【发布时间】：2021-11-15 17:26:06
【问题描述】：

在 iPadOS 14 中为 Safari 编码的 PWA 中，我使用一个简单的侦听器在单击按钮时显示弹出窗口。虽然这在包括 iPadOS 14.6 的情况下运行良好，但相同的代码不在 iPadOS 15.0 中。

侦听器“touchend”导致弹出窗口仅显示一微秒并再次关闭。仅在使用侦听器“单击”时，相同的操作也可以正常工作。但是“touchend”这个动作要直观得多。

$('.popup').on('touchend click', function(e) {
    e.preventDefault();
    $('#popup-content').toggleClass('d-flex d-none');
});

此外，当触摸任何按钮超过 0.5 秒时，会显示一个空的小窗口（标注）。在 iPadOS 14 中，这种行为可以通过简单的 CSS 来防止：

-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;

如何在最新的 iPadOS 15 中防止这两种行为？

【问题讨论】：

【解决方案1】：

我找到的简单解决方案是将带有 preventDefault() 的“touchstart”侦听器添加到同一个按钮：

$('.popup').on('touchstart', function(e) {
    e.preventDefault();
});

这两个操作的行为再次与 iPadOS 14 中的相同。

【讨论】：