jQuery .on('click')事件在iOS设备中失效的解决咨询

针对你遇到的iOS端click失效、安卓端touchstart失效的问题，可以通过同时绑定多事件并处理重复触发的方式解决，具体修改如下：

代码优化方案 #

if (window.matchMedia("(max-width: 1366px) and (-webkit-min-device-pixel-ratio:1.5)").matches) {
    const $links = jQuery('.click_and_shop_content a');
    $links.addClass('noto');    

    // 同时绑定touchstart和click事件，覆盖双端交互场景
    $links.on("touchstart click", function (e) {
        // 阻止默认行为，避免a标签跳转及iOS的300ms点击延迟
        e.preventDefault();

        // 处理重复触发问题：touchstart触发后标记已处理，避免后续click重复执行
        if (e.type === 'touchstart') {
            jQuery(this).data('handled', true);
        } else if (e.type === 'click' && jQuery(this).data('handled')) {
            jQuery(this).data('handled', false);
            return;
        }

        if (jQuery(this).hasClass('noto')) {
            $links.addClass('noto');
            jQuery(this).removeClass('noto');
        }
    });
}

方案说明 #

1. 多事件绑定：同时绑定touchstart和click，确保iOS（依赖触摸事件）和安卓（兼容click事件）都能正常触发逻辑
2. 重复触发拦截：通过data('handled')标记事件处理状态，避免一次触摸操作同时触发touchstart和click两个事件导致逻辑重复执行
3. 默认行为阻止：统一调用e.preventDefault()，既实现你需要的阻止a标签跳转逻辑，也解决iOS原生click的300ms延迟问题

额外优化建议 #

• 调整媒体查询条件：当前的(-webkit-min-device-pixel-ratio:1.5)可能会遗漏部分移动端设备，建议结合pointer: coarse（触摸设备判断）优化，比如：

  if (window.matchMedia("(max-width: 1366px) and (pointer: coarse)").matches) {
      // 你的逻辑
  }
  

• 增强元素交互识别：在CSS中补充以下样式，确保iOS将目标元素识别为可交互节点：

  .click_and_shop_content a {
      cursor: pointer;
      tab-index: 0;
  }
  

内容的提问来源于stack exchange，提问作者overcaffeinated