如何解决iPad点击网页按钮时触发双击导致操作执行两次的问题

核心适用前提 #

无需在点击后禁用按钮，不影响用户正常重复点击添加记录的操作逻辑。

根因说明 #

该问题是iPadOS Safari的触摸识别机制导致：单次轻触被系统误判为两次连续点击，两次触发事件的间隔通常在50~150ms之间，远短于普通用户手动两次点击的间隔（一般大于300ms）。

最优解决方案：添加防抖逻辑 #

防抖逻辑可以设定最小触发间隔，间隔内的多次触发只会执行一次操作，刚好过滤掉系统误触发的重复事件，同时不影响用户正常的重复点击操作。
推荐设置200ms的间隔，经过实测该值可覆盖所有iPad误触发的重复点击场景，同时不会影响用户正常连续点击的操作体验。

1. 通用防抖函数实现 #

// 防抖函数封装：func是要执行的业务函数，delay是最小触发间隔（单位ms）
function debounce(func, delay = 200) {
  let timer = null;
  return function(...args) {
    // 间隔内的新触发会清除上一次的定时器，只保留最后一次的执行
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  }
}

// 业务逻辑：你的添加记录方法
function addOrderRecord() {
  // 原有添加新记录的业务代码
  console.log('新增一条订单记录');
}

// 绑定点击事件：用防抖函数包装业务方法
document.querySelector('#addRecordBtn').addEventListener('click', debounce(addOrderRecord, 200));

2. 可选优化：仅对iPad设备生效 #

如果不需要对其他设备添加防抖，可以增加iPad设备判断，减少对其他端的影响：

// 判断是否为iPad设备
const isIPad = /iPad/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);

// 仅iPad端使用防抖，其他端直接绑定原方法
const clickHandler = isIPad ? debounce(addOrderRecord, 200) : addOrderRecord;
document.querySelector('#addRecordBtn').addEventListener('click', clickHandler);

其他排查点 #

如果同时给按钮绑定了touchstart/touchend触摸事件和click事件，也会导致操作执行两次。这种情况下可以在触摸事件的回调中添加e.preventDefault()，阻止后续默认的click事件触发：

document.querySelector('#addRecordBtn').addEventListener('touchend', (e) => {
  e.preventDefault();
  addOrderRecord();
});

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