如果您没有在 iOS Safari 中点击按钮，则点击事件不会触发

问题描述

我的 PWA 应用的用户抱怨他们有时不得不点击一个按钮 2-10 次才能触发它。我无法弄清楚是什么导致了这种情况。起初我认为可能是由于我的代码错误或互联网连接不良，但后来我意识到：

如果您没有在 iOS Safari 中直接点击按钮，则点击事件不会触发。

换句话说：如果您用手指点击按钮，然后向任一方向稍微移动手指，即使只是几毫米，然后松开手指，点击事件将不会'火。

对于普通的人类用户来说，这种情况似乎经常发生，他们对正在发生的事情（或没有发生）感到沮丧，不知道为什么，或者责怪我的代码。

我认为如果您在仍处于按钮区域内时松开手指，应该会触发点击事件。这至少是 Windows 版 Chrome 中的默认行为。

有没有办法解决这个问题？相信我，我一直在谷歌上搜索这个，并尝试了很多不同的东西，从不同的事件处理程序到 JS 水龙头库。

编辑：如果您按住手指超过一瞬间，似乎会发生同样的事情。

这是我制作的 PWA 测试应用的链接，其中包含一个简单的按钮和以下代码：[链接已删除]

您可以通过在 Safari 中打开 PWA 来“下载”它，然后点击“共享”->“添加到主屏幕”。

document.addEventListener('click',function(e) {
    if (!document.body.contains(e.target)) {
        return;
    }

    if (e.target.matches('#testButton')) {
        alert('Button clicked!');
    }
});

<div id="testButton">Click me to test</div>

解决方法

这是由a bug in Safari Mobile引起的。我通过向所有按钮添加 onclick="void(0)" 解决了这个问题，如下所示：

<div id="testButton" class="button" onclick="void(0)">Click me to test</div>