使用JavaScript在iPad/Android端点击按钮延迟，间隔<500ms点击丢失问题

问题原因 #

• 移动端浏览器默认的双击缩放判定逻辑：系统会在第一次触摸后等待300~500ms，判断是否有第二次触摸触发双击缩放，间隔小于该阈值的快速点击会被识别为双击操作而非两次独立点击，进而导致事件丢失。AB快速交替点击时，连续触摸不同元素的行为更容易触发手势判定误判，丢事件的问题会更明显。
• 未阻止触摸事件的默认行为：当前代码仅监听了touchstart事件，没有拦截浏览器默认的触摸事件处理流程，浏览器会继续校验当前触摸是否属于滑动、缩放等系统级手势，校验过程中会吞掉不符合手势规范的高频短间隔点击。
• onclick事件本身的触发逻辑限制：onclick会在touchend事件触发后才执行，本身就受300ms延迟逻辑的影响，所以切换为onclick监听也无法解决问题。

修复方案 #

1. 添加viewport meta标签禁用页面缩放 #

在页面head节点中加入以下配置，从系统层面关闭双击缩放判定逻辑，消除300ms等待周期：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 阻止触摸事件的默认行为 #

在touchstart事件回调中新增阻止默认行为的逻辑，拦截浏览器后续的手势校验流程，修改后的代码如下：

body = document.getElementById "body"
d = null
command = ''
start = new Date()

f = (title) =>
    res = document.createElement 'button'
    res.innerHTML = title
    res.style = "width:300px;height:300px"
    body.appendChild res
    res.ontouchstart = (e) =>
        e.preventDefault()
        t = new Date()
        command += title + "#{t-start} "
        d.innerHTML = command
        start = t

f 'A'
f 'B'
d = document.createElement 'div'
d.innerHTML = '104'
body.appendChild d

3. 补充样式禁用系统触摸手势（可选，兼容旧设备） #

给按钮添加touch-action: none样式，明确告诉浏览器该元素不需要响应任何系统触摸手势，进一步避免事件被拦截：

res.style = "width:300px;height:300px;touch-action: none"

内容的提问来源于stack exchange，提问作者Kri-ban