iOS 13.4/13.5/13.5.1 pointerup事件缺失问题求助

我之前也碰到过iOS Safari在13.4版本之后的指针事件兼容问题，正好可以帮你解决这个双击只触发一次pointerup的问题。

问题根源 #

iOS 13.4及后续版本的Safari为了优化原生交互（比如双击缩放），调整了指针事件的处理逻辑：当检测到快速连续的两次点击时，浏览器会把第二次pointerup事件拦截或者合并，导致你的代码只能捕获到一次。而iOS 13.3及更早版本还没有这个优化，所以能正常触发两次。

可行解决方案 #

这里有几个实用的方案，你可以根据自己的需求选择：

1. 禁用双击缩放（最直接的解决方式）

通过配置viewport或者CSS属性，阻止浏览器的双击缩放默认行为，这样两次pointerup事件就能正常触发了。

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- 配置viewport禁用用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<style>
p { padding: 0; margin: 0; }
/* 或者用touch-action属性禁止双击缩放，这个更精准 */
body {
  touch-action: manipulation;
}
</style>
</head>
<body>
<div id="observing-events-log" class="log">
<strong>Objects events</strong>
</div>
<script type="text/javascript">
function logObservingEvent(eventName) {
  const el = document.getElementById("observing-events-log");
  const para = document.createElement("p");
  para.appendChild(document.createTextNode(eventName));
  el.appendChild(para);
}
document.body.addEventListener('pointerup', (ev) => {
  logObservingEvent("pointerup");
  // 可选：阻止事件冒泡，避免被浏览器的默认行为干扰
  ev.stopPropagation();
})
</script>
</body>
</html>

2. 用pointerdown辅助统计点击次数（保留缩放功能）

如果不想禁用页面缩放，你可以通过监听pointerdown记录点击间隔，配合pointerup来识别两次点击：

let clickCount = 0;
// 双击的时间阈值，一般300ms以内算双击
const DOUBLE_CLICK_TIMEOUT = 300;
let lastClickTimestamp = 0;

document.body.addEventListener('pointerdown', (ev) => {
  const now = Date.now();
  if (now - lastClickTimestamp < DOUBLE_CLICK_TIMEOUT) {
    // 两次点击间隔在阈值内，计数+1
    clickCount++;
  } else {
    // 超过阈值，重置为第一次点击
    clickCount = 1;
  }
  lastClickTimestamp = now;
});

document.body.addEventListener('pointerup', (ev) => {
  logObservingEvent(`pointerup (第${clickCount}次触发)`);
});

这种方式不需要修改页面缩放设置，也能准确统计双击的两次pointerup行为。

3. 补充监听touch事件（备选兼容方案）

如果指针事件的问题依然存在，你可以同时监听touchend事件作为补充——iOS Safari对touch事件的处理一直比较稳定：

// 同时监听pointerup和touchend
document.body.addEventListener('pointerup', (ev) => {
  logObservingEvent("pointerup");
});

document.body.addEventListener('touchend', (ev) => {
  logObservingEvent("touchend");
});

测试建议 #

你可以在iOS 13.4+的设备上测试上述方案，其中禁用双击缩放的方案最直接，能让pointerup事件恢复正常触发；如果需要保留页面缩放功能，用pointerdown计数的方案会更合适。

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