移动端菜单卡顿或误触主因是 click 事件 300ms 延迟及 touch-action 设置不当；应优先用 pointerdown，正确配置 touch-action（如 pan-y）、overscroll-behavior 和焦点管理。
为什么直接用 click 绑定菜单按钮在移动端会卡顿或误触
因为 iOS 和多数 Android 浏览器对 click 事件保留约 300ms 延迟，用于判断是否双击缩放。用户点开菜单时，明显感知“点了没反应”，尤其在快速连续操作（比如连点两次展开子项）时容易触发错误状态。
更麻烦的是：如果菜单里嵌了 a 标签或带 href 的按钮，click 还可能在 touchstart 后、touchend 前就跳转，导致菜单刚弹出就跳页。
- 别依赖
fastclick：项目已停止维护，且现代浏览器（Chrome 56+、Safari 10.3+、Firefox 52+）默认禁用双击缩放后，延迟已基本消失——前提是你的<meta name="viewport">正确设置了user-scalable=no或maximum-scale=1 - 优先用
pointerdown：它兼容触控/鼠标/笔，无延迟，且不破坏键盘可访问性（Enter/Space仍能触发） - 若必须用
touchstart，一定要加{ passive: false }，否则preventDefault()无效；同时补监听keydown，否则屏幕阅读器用户无法操作
touch-action 设错会让菜单拖不动或滚不了
菜单容器（比如侧边栏、下拉面板）常被设成 touch-action: none 来阻止浏览器默认手势，但这个值一加，整个区域就既不能滚动也不能点击——因为 none 会禁用所有原生交互，包括 click 和焦点获取。
真实场景中，你大概率只需要约束某类手势：
立即学习“前端免费学习笔记（深入）”；
- 下拉菜单（含可滚动列表）：用
touch-action: pan-y，允许上下滑动，但禁止左右拖拽和缩放 - 横向轮播菜单：用
touch-action: pan-x，避免手指偏移时意外触发页面垂直滚动 - 纯按钮/开关区域：别设
touch-action，保持默认行为；设了none反而让click失效 - 测试方法：真机上两指快速滑动菜单区域，看是否还透传到底部页面——透传说明
touch-action没生效或设错了
菜单弹出后背景还能滚？不是 overflow: hidden 不好使
给 body 加 overflow: hidden 看似简单，但实际会引发三个问题：iOS Safari 滚动条消失后无法恢复、焦点丢失、页面重排导致闪屏；而且用户从菜单内滚动到底部再松手，惯性仍会带动背景滚动。
更稳的解法是组合控制：
- 在菜单打开时，给
html元素加style="overscroll-behavior: none"，阻断滚动链透传 - 同时给
body加touch-action: none，防止手指在空白区触发背景滚动 - 记录当前
window.scrollY，关闭菜单后执行window.scrollTo(0, savedY)，而不是靠 CSS 强制锁死 - 避免用
position: fixed; top: 0; width: 100%覆盖 body —— 它会截断focusin事件，导致键盘用户无法 tab 到菜单内元素
触控目标小于 44×44px 是硬伤，光靠视觉大小骗不过真机
设计稿里一个 24px 图标 + 8px padding，看起来够大，但实际渲染时可能被父容器 overflow: hidden 裁掉、被 line-height 压扁、或因行内元素默认基线对齐导致点击区上下塌陷。iOS 和 Android 的可访问性指南都强制要求最小触控目标为 44×44 CSS 像素。
实操要点：
- 菜单项用
button或a，并设为display: block或inline-block，别让它保持纯行内表现 - 用
min-width: 44px+min-height: 44px兜底，比只靠padding更可靠 - 在 Chrome DevTools 中开启「Toggle device toolbar」→「Emulate touch events」→「Show ripples」，点一下看涟漪是否完整覆盖整个目标区域
- 别为了塞更多菜单项而缩小间距——相邻项间隔至少 8px，否则拇指误触率飙升
最易被忽略的一点：菜单展开后，第一个可聚焦元素没自动获得焦点，关闭后也没把焦点还给触发按钮。这对蓝牙键盘用户和 VoiceOver 用户等于关上了门。手动调用 focus() 不是锦上添花，是底线。
