原生 <button> 比 <div onclick> 更可靠，因其自带焦点管理、键盘触发、屏幕阅读器识别和 touch-action: manipulation；<label> 必须显式包裹或用 for 关联 <input>；禁用 role="button" 伪装；touch-action: manipulation 仅加在可点击元素上；viewport 必含 initial-scale=1.0 且静态置于 <head>；防穿透需在 touchend 清状态并恢复滚动。

为什么比

更可靠

原生 <button> 自带焦点管理、键盘触发（Enter/Space）、屏幕阅读器识别和默认 touch-action: manipulation 行为。换成 <div onclick="..."> 后，iOS VoiceOver 可能跳过它，Android TalkBack 读作“静态文本”，手指点下去没反馈——DOM 存在，但语义断了。

• 必须用 <button> 替代所有带点击行为的 <div>，哪怕只是执行 onclick="toggleMenu()"
• <label> 必须显式包裹 <input type="checkbox"> 或用 for 关联，否则点击文字区域无法触发切换
• 禁用 role="button" 伪装：它不自动支持 keyboard focus、不触发 :active、在部分 WebView 中完全无效

touch-action: manipulation 要加在哪

这个 CSS 属性不是全局开关，而是告诉浏览器“此处只需响应点击和单指纵向滚动”。加错位置反而让页面卡死或按钮失效。

• 只加在有点击意图的元素上，比如 <button>、<a href="#">、<div class="card" onclick="">
• 原生可点击元素默认已有该行为，除非你写了 display: inline 或显式设了 touch-action: auto
• 别设在 <html> 或 <body> 上，否则页面无法滚动；也别设在弹层遮罩层上，会截断下层焦点
• IE10/11 需加前缀：-ms-touch-action: manipulation

viewport meta 标签缺哪项都会失效

只写 <meta name="viewport" content="width=device-width"> 不会消除延迟——iOS Safari 9.2 及更早版本、UC/QQ 浏览器旧版仍会等满 300ms。浏览器需要明确的缩放锚点，initial-scale=1.0 是硬性条件。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 必须包含 initial-scale=1.0，否则双击判定优化不触发
• user-scalable=no 或 maximum-scale=1.0 才真正禁用双击缩放；minimum-scale=1.0 单独无效，拼错成 minimun-scale 会导致整个 meta 失效
• 该标签必须静态写在 <head> 内，动态插入或放在 <body> 里解析失败
• 若需保留图片双指放大能力，就不能用 user-scalable=no，得靠后续方案补位

防穿透和状态残留比延迟更难调试

哪怕 touch-action 已生效，只要上层弹层在 touchend 后立刻 display: none 或移除，300ms 后原生 click 仍会落到下层按钮上——这属于事件冒泡透传，JS 拦截不了。

立即学习“前端免费学习笔记（深入）”；

• 松开按钮时用 ontouchend/onmouseup 清状态，别依赖 mouseleave（手指滑出区域时不触发）
• 弹层关闭后，用 window.scrollTo(0, savedY) 恢复背景滚动位置，而不是粗暴设 overflow: hidden
• 菜单展开后，给 <html> 加 style="overscroll-behavior: none"，再配合 body 的 touch-action: none 阻断透传
• 真机测试时重点验证：两指快速滑动弹层外空白区，确认背景完全静止