如何解决最新iOS中jQuery绑定click与tap导致函数重复执行问题

在同时绑定click和tap事件适配新旧iOS版本时，新版iOS会因为同时触发两个事件导致回调函数执行两次，以下是几种可行的解决办法：

方法1：添加防抖标记 #

通过一个状态标记控制短时间内只执行一次回调，覆盖iOS的点击延迟周期（通常300ms）：

let isProcessing = false;
$(".test").on("click tap", function() {
  if (isProcessing) return;
  isProcessing = true;
  
  // 你的业务逻辑
  console.log("yey!");
  
  setTimeout(() => {
    isProcessing = false;
  }, 300);
});

方法2：区分事件类型并阻止重复触发 #

在tap事件触发后，阻止后续click事件的执行，同时保留对非触摸设备的兼容性：

let hasTapTriggered = false;

$(".test")
  .on("tap", function() {
    if (hasTapTriggered) return;
    hasTapTriggered = true;
    console.log("yey!");
    
    setTimeout(() => {
      hasTapTriggered = false;
    }, 300);
  })
  .on("click", function(e) {
    if (hasTapTriggered) {
      e.preventDefault();
      e.stopPropagation();
      return;
    }
    console.log("yey!");
  });

方法3：用touchstart替代tap并拦截click #

直接使用原生touchstart事件代替tap，同时在触摸事件中阻止默认行为以避免触发click：

$(".test").on("touchstart click", function(e) {
  if (e.type === "touchstart") {
    // 阻止触摸事件触发后续click
    e.preventDefault();
    console.log("yey!");
  } else {
    // 适配非触摸设备的点击
    console.log("yey!");
  }
});

注意：如果元素所在区域需要滚动，e.preventDefault()会阻止滚动，此时不建议使用该方法。

方法4：动态判断绑定事件 #

通过检测设备是否支持触摸事件，只绑定对应事件类型，避免重复绑定：

const eventType = 'ontouchstart' in window ? 'tap' : 'click';
$(".test").on(eventType, function() {
  console.log("yey!");
});

该方法适合不需要同时兼容极旧iOS版本（仅支持click）的场景，若需兼容旧版，可保留双绑定但结合防抖逻辑。

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