javascript - 点击事件不适用于 iPad，但适用于桌面和移动设备

Question

我正在尝试创建简单的 JavaScript 代码。我有两个带有图像的按钮，它们用作单选按钮以在两个选项之间切换。一切都适用于最流行的设备类型:Android+Chrome、Desktop+Chrome 和 iPhone+Safari。但是当我点击我的 iPad+Chrome 或 iPad+Safari 时……没有任何反应。这不是第一次出现 onclick 和类似事件/触发器不起作用的情况。

我已经尝试过不同的事件，例如 on() 以及不同的选项，例如“click”、“tap”、“touchstart”以及它们的组合，bind() 、window.onclick、addEventListener 等。它们都可以在我上面描述的所有平台上运行。但不是 iPad。我也尝试过像“在元素的 html 代码中添加 onclick=”、“添加 css 属性光标:指针”等建议。这是我现在使用的代码:

window.onload = function () {
    $(document).on('click', 'button.png-option', function () {
        checkIt()
    });
};

<button class="png-option" type="button" id="sms-web" onclick="">
                <img src="{{ url_for('static', filename='web.png') }}" class="medium-png active" id="web">
            </button>

.png-option {
    height: 50px;
    width: auto;
    cursor: pointer;
}

.medium-png {
    height: 50px;
    width: auto;
}

.medium-png.active {
    border: 4px solid #81bd79;
    border-radius: 25px;
    transition: .2s;
}

这不是我第一次遇到这个问题。我工作的最后一个项目有同样的问题。而且我没有找到任何可行的解决方案。

Answer 1

将 iPad 连接到 Mac 机器并检查可点击区域。有时，可点击(点击)区域可能不在正确的位置，或者区域可能处于折叠状态，如 0 宽度或 0 高度。也有可能另一个不可见层位于可点击区域上方。不连接Mac机，调试困难。 Click 事件应该触发 touch 或 tap 事件，否则不会失败。