深层嵌套（DOM深度超6层）会增加touchstart事件冒泡路径，易被pointer-events:none或touch-action:none截断，导致低端安卓机响应延迟达42ms；应控制DOM深度、用display:contents抹除冗余包裹、语义化标签替代div、确保触摸目标物理尺寸≥48×48px、合理设置touch-action。
为什么深层嵌套会让手指点不准
DOM 深度超过 6 层时，touchstart 事件从触发点冒泡到监听器的路径变长，中间任意一层设了 pointer-events: none 或 touch-action: none，就可能截断或延迟事件。实测在低端安卓机上，body > div > div > div > div > div > button 这种结构平均响应延迟 42ms；而 <main><nav><button></button></nav></main> 三层结构稳定在 8–12ms。
- 用 Chrome DevTools → Elements 面板右键任意元素 →
Show DOM properties查看depth值，超 6 就该重构 - 别为加 class 或 JS 选择器硬套
div：改用display: contents（Safari 15.4+ 支持）抹掉无意义包裹层 - 动态插入菜单项时，用
DocumentFragment批量append，别循环appendChild——每次调用都可能触发 layout，拖慢触控响应
语义化标签缺失直接导致 VoiceOver 跳过按钮
屏幕阅读器不是靠视觉定位按钮，而是解析语义结构生成导航树。<button></button>、<input type="checkbox"> 这些原生标签自带焦点管理、键盘触发（Enter/Space）和触控反馈通道；换成 <div class="btn"></div> 后，iOS VoiceOver 会跳过它，Android TalkBack 可能读作“静态文本”，手指点下去毫无响应。
- 必须用
<button></button>替代所有带点击行为的div，哪怕只是执行onclick="toggleMenu()" -
<label></label>必须显式包裹<input type="checkbox">或使用for关联，否则点击 label 文字区域无法触发 checkbox 切换 - 禁用
role="button"伪装：它不自动支持 keyboard focus、不触发:active、在部分 WebView 中完全无效
触摸目标尺寸 ≠ CSS 视觉尺寸
可触区域必须满足物理像素 ≥ 48×48px，这不是“加 padding”就能解决的视觉问题，而是 DOM 元素的 clientWidth × clientHeight 必须达标。否则 VoiceOver 的「焦点环」会跳过、手指误触率飙升。
- 检查所有
<a></a>、<button></button>、<input type="checkbox">的渲染尺寸，用 Chrome DevTools 的「Toggle device toolbar」+「Inspect」实时测 - 图标按钮（如
<button><svg></svg></button>）必须显式设min-width: 48px; min-height: 48px;，不能只靠 SVG 自身尺寸 - 相邻可触元素间距至少 8px，否则 iOS VoiceOver 在「滑动切换焦点」时容易连跳两个
viewport + touch-action 组合错配引发误触
光写 touchstart 不等于没延迟，touch-action 设错会让菜单拖不动、滚不了，甚至让 click 失效。例如给按钮设 touch-action: none，iOS 上点不动；给列表设 touch-action: manipulation，垂直滚动卡顿。
立即学习“前端免费学习笔记（深入）”；
-
button、.btn、[role="button"]应统一设touch-action: manipulation -
.carousel-container必须设touch-action: none -
.scrollable-list应设touch-action: pan-y - 真机上两指快速滑动菜单区域，看是否还透传到底部页面——透传说明
touch-action没生效或设错了
touch-action 的联动影响：一个按钮即使语义正确、尺寸达标，若被包在 7 层 div 里，又套在 touch-action: none 的父容器中，它就既点不动，也进不了 VoiceOver 导航树。 
