长按触发菜单时touchstart内定时器常失效，因移动端touchstart后易被touchmove/touchend中断，Android WebView还可能误触发click导致菜单闪退；须统一管理timerId并在touchmove、touchend、touchcancel中清除，同时防抖、坐标校验并处理事件穿透。
长按触发菜单时，touchstart 里设定时器为什么常失效？
因为移动端浏览器在 touchstart 后很快会触发 touchmove 或 touchend，尤其手指稍有偏移或屏幕有惯性滚动，就会清除定时器；更隐蔽的是，某些 Android WebView 会在 touchstart 后立即触发 click（即使没松手），导致菜单刚弹出就关闭。
- 必须在
touchstart中设置定时器，并在touchmove和touchend中主动clearTimeout - 要阻止默认行为（如滚动）仅限于目标元素，避免影响页面其他交互
- 推荐阈值设为
500毫秒——太短易误触，太长用户感知延迟明显
touchcancel 必须处理，否则 iOS Safari 长按菜单会失灵
iOS Safari 在系统级长按（比如选中文本、唤出复制菜单）或视口缩放时会触发 touchcancel，若不在此事件中清除定时器，后续的 touchstart 可能因残留定时器冲突而无法重新计时。
- 所有绑定的 touch 事件（
touchstart/touchmove/touchend/touchcancel）都应共享同一个timerId变量 -
touchcancel的处理逻辑和touchend完全一致：清除定时器 + 重置状态 - 不要依赖
event.preventDefault()抑制系统菜单——它会同时禁用文本选择等正当行为；改用user-select: none控制 CSS 级别选择
菜单弹出后，如何防止点击穿透到下层元素？
长按菜单是绝对定位浮层，但若未正确管理层级与事件捕获，用户点击菜单项时可能同时触发底层按钮的 click，造成重复操作或跳转。
- 菜单容器需设置
pointer-events: auto（默认即如此），但确保其父容器没有pointer-events: none - 在
touchend触发菜单后，立即给body加style="touch-action: manipulation"可减少误触发，但更可靠的做法是在菜单显示时监听一次touchstart并stopPropagation() - 避免在菜单 DOM 插入后立刻绑定事件——用事件委托（如代理到
document）更稳妥，防止动态插入导致监听丢失
兼容老版本 Android WebView 的关键补丁
Android 4.4–6.0 的 WebView 对 touch 事件支持不稳定：touchstart 可能不触发、touchend 延迟高达 300ms、甚至同一事件被重复派发两次。
立即学习“前端免费学习笔记（深入）”；
- 加一层防抖：记录上一次
touchstart时间戳，间隔100ms内的重复事件直接忽略 - 不用
setTimeout，改用window.requestIdleCallback（如有）或降级为setImmediate（IE）+setTimeout组合，避免 JS 主线程阻塞导致计时不准确 - 对
touchend做坐标校验：如果changedTouches[0].clientX与touchstart时相差超过10px，视为滑动而非长按，直接忽略
真正麻烦的不是写几行定时器代码，而是不同机型对 touch 事件流的解释差异——哪怕只是 2px 的手指偏移，在某些华为旧机型上就会让 touchend 永远不来。
