时间戳

首页 > 解决方案 > 点击事件在 iPad 上不起作用，但在桌面和移动设备上起作用

javascript - 点击事件在 iPad 上不起作用，但在桌面和移动设备上起作用

问题描述

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

我已经尝试过不同的事件，例如on()使用不同的选项，如“点击”、“点击”、“触摸启动”以及它们的组合、、、bind()等等window.onclick。addEventListener它们都在我上面描述的所有平台上工作。但不是 iPad。此外，我尝试过诸如“将 onclick="" 添加到元素的 html 代码”、“添加 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;
}

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

标签： javascriptjquerydom-events

解决方案

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

推荐阅读