用 click 绑定汉堡按钮会导致菜单滑动卡顿，因为 ios 和多数 android 浏览器对 click 事件保留约 300ms 延迟以判断双击缩放，造成响应滞后、连点误触发及 href 提交早于菜单显示；现代浏览器虽默认禁用该延迟，但需正确设置 viewport 的 user-scalable=no 或 maximum-scale=1，且应改用 pointerdown 替代 click，并精准配置 touch-action: pan-y 等手势约束。
为什么用 click 绑定汉堡按钮会导致菜单滑动卡顿
因为 iOS 和多数 Android 浏览器对 click 事件保留约 300ms 延迟，用于判断是否双击缩放。用户点下汉堡图标后，菜单不会立刻响应，尤其在快速连点或点击子项时，容易触发错误状态（比如刚展开就收起）。更糟的是：若按钮是带 href 的 <a></a> 或含 submit 的表单控件，click 可能在 touchend 前就跳转或提交，菜单根本来不及显示。
现代浏览器（Chrome 56+、Safari 10.3+、Firefox 52+）已默认禁用双击缩放——但前提是你的 <meta name="viewport"> 正确设置了 user-scalable=no 或 maximum-scale=1。否则延迟照旧。
别用已停止维护的 fastclick；直接换 pointerdown：
-
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
-webkit-overflow-scrolling: touch 在 Safari 中偶尔卡住怎么办
这个属性本意是启用 iOS 原生级回弹滚动，但实际使用中极不稳定：有时滑动几下就卡死，有时点击其他区域后再滑动，滚动完全失效。它还会创建新堆栈上下文，可能干扰 z-index 和动画层级。
替代方案更可靠：
- 优先用
transform: translateY()替代top/margin-top控制菜单位移——它走合成层，不触发重排 - 确保菜单容器有明确高度，并开启 GPU 加速：
will-change: transform或transform: translateZ(0) - 若需监听滚动，
scroll事件必须加{ passive: true }，否则 Safari 会因等待 JS 执行而阻塞滚动 - 长列表菜单务必用虚拟滚动，避免 DOM 节点过多拖慢渲染
最常被忽略的一点：菜单 JS 初始化失败（比如 document.getElementById("xxx") 报错），会导致整个切换逻辑未注册——此时无论 CSS 写得多漂亮，菜单都纹丝不动。先查 Console 红字报错，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
