小屏点不中按钮主因是DOM语义缺失：原生button等标签自带可访问性、键盘支持和视觉反馈，而div伪装按钮导致屏幕阅读器跳过、无:focus状态、触摸目标尺寸不足（未达48×48px）、嵌套过深引发touchstart延迟，以及事件委托未覆盖动态菜单项。
为什么小屏上点不中按钮？DOM语义缺失是主因
原生 <button></button> 能被 VoiceOver/TalkBack 识别、支持键盘触发、自带 :active 反馈；换成 <div class="btn"> 后，屏幕阅读器直接跳过，手指点下去也没视觉反馈——这不是 JS 问题，是 DOM 层级存在但语义丢失。
<ul>
<li>真机测试时双指滑动焦点，“按钮”被跳过，或点击无反馈但 JS 逻辑能执行 → 说明 DOM 渲染了，但辅助技术“摸不到”</li>
<li>所有带点击行为的元素，必须用 <code><button></button>、<a href></a>、<input type="checkbox"> 等原生可交互标签
role="button" 伪装：它不自动获得焦点、不响应 Space/Enter、在部分安卓 WebView 中完全失效触摸目标尺寸不达标：CSS像素 ≠ 实际可触区域
W3C 要求最小触控区域为 48×48 CSS 像素，但很多人只设了 width: 48px; height: 48px，却忽略了 padding、border、line-height 对实际可触面积的影响。
- 用
min-width: 48px; min-height: 48px强制保底，比固定宽高更可靠（尤其文字按钮会随字号缩放） - 文字按钮务必加
padding，且总尺寸（含 padding）≥ 48×48 —— 单靠字体大小撑不够 - 图标按钮要包裹
<span></span>或用伪元素生成，避免仅靠font-size控制尺寸
DOM嵌套过深导致 touchstart 延迟明显
实测 body > div > div > div > div > div > button 这种 6 层结构，在低端安卓机上 touchstart 到 handler 执行平均延迟 42ms；而 <main><nav><button></button></nav></main> 三层结构稳定在 8–12ms。
- Chrome DevTools → Elements 面板右键任意元素 →
Show DOM properties查看depth值，超过 6 就该重构 - 别为加 class 或 JS 选择器硬套
<div>：改用 <code>display: contents（Safari 15.4+ 支持）抹除无意义包裹层 - 动态插入菜单项时，用
DocumentFragment批量 append，避免循环appendChild触发多次 layout - 不要复用
.submenu类名污染语义，统一给所有可展开项加data-toggle="dropdown" - 用事件委托监听
document或最近公共父容器，通过e.target.closest('[data-toggle]')精准定位触发源 - 展开逻辑应基于当前点击项的下一个
<ul></ul>兄弟节点，而非固定查找.submenu类
多级下拉菜单在小屏点击失效的根源与修复
桌面端靠 :hover 展开，移动端切点击后常出现“点了父级有反应，点子级没反应”——本质是 JS 事件监听没覆盖到 .nested-menu 这类深层结构。
立即学习“前端免费学习笔记（深入）”；
