移动端 touchstart 未触发常因 user-select: none 拦截，需检查目标及父级元素；click 在 iOS 有 300ms 延迟且易丢失，建议改用带节流的 touchend。
移动端 touchstart 事件没触发？先确认是否被 user-select: none 拦截
很多页面为了防止误选文字，全局或局部设置了 user-select: none，这会直接禁用触摸选中行为，连带导致 touchstart 在部分安卓 WebView（尤其是旧版）中无法触发。这不是事件没绑定，而是浏览器压根不派发。
- 检查目标元素及其任意父级是否设置了
user-select: none或-webkit-user-select: none - 若必须禁选文字但又要响应触摸，改用
user-select: text（允许选中）+pointer-events: auto，再通过preventDefault()在事件中阻止默认选中逻辑 - 不要依赖 CSS 禁选来“优化体验”，它和触摸事件生命周期强耦合，容易引发静默失效
click 在 iOS 上延迟 300ms 且偶发丢失？换用 touchend 并手动防重复
iOS Safari 对 click 的 300ms 延迟不是 bug，是为双击缩放留的判断窗口。但更麻烦的是：当快速连续点击、或 touch 区域边缘触发时，click 可能完全不触发——尤其在 position: fixed 或 transform 元素上。
- 优先用
touchend替代click，但它不自动防抖，需手动加节流：if (Date.now() - lastTouchEnd - 务必在
touchend中调用event.preventDefault()，否则某些安卓机型会继续派发后续click，造成重复执行 - 避免在
touchstart中修改 DOM（如 show/hide），这可能打断 touch 流程，导致touchend不触发
为什么 addEventListener('touchstart', ...) 绑定后还是没反应？检查事件捕获阶段和 passive 选项
Chrome 56+ 和大部分新版安卓浏览器强制要求对 touchstart / touchmove 设置 { passive: false }，否则会忽略 preventDefault() 调用，进而影响滚动行为判断——但更隐蔽的问题是：如果没显式声明 passive: false，某些 WebView 会静默丢弃事件监听器。
- 必须写成：
el.addEventListener('touchstart', handler, { passive: false }) - 不要省略第三个参数，也不要传
false（那是 useCapture 参数，不是 passive） - 如果用框架（如 Vue 的
@touchstart），确认其底层是否已处理 passive；未处理的需手动 patch 或改用原生绑定 - 检查是否在事件捕获阶段（
useCapture = true）绑定了同类型事件并提前stopPropagation()，这会让目标阶段的监听器收不到事件
iOS Safari 中 touchcancel 频繁触发？大概率是滚动或缩放打断了 touch 流程
touchcancel 不代表错误，而是浏览器明确告诉你：“这个触摸序列被系统接管了”。常见于手指滑动开始滚动、双指张开缩放、或页面被其他原生控件（如地址栏）遮挡时。若你依赖 touchstart → touchend 完整流程做状态管理（比如按钮按压态），touchcancel 就必须处理。
立即学习“前端免费学习笔记（深入）”；
- 在
touchstart中记录按下状态，在touchend和touchcancel中统一重置，避免悬停态残留 - 不要在
touchcancel中尝试恢复 UI，它只表示“放弃”，不代表可逆操作 - 若需禁用缩放干扰，用
，但注意这会影响可访问性，慎用
实际兼容性最棘手的点不在事件名本身，而在不同 WebView 对“触摸中断”的判定逻辑差异——比如同一个滑动手势，在 iOS Safari 触发 touchcancel，在三星自带浏览器却走完 touchend。这意味着，任何依赖完整 touch 生命周期的状态机，都得把 touchcancel 当作第一类公民来设计。
