移动端点击失效主因是热区未激活：padding加错元素、a/button未设block/inline-block、父级overflow/pointer-events截断、label未包裹input或input被隐藏、触控尺寸不足44×44px、DOM过深超6层拖慢事件冒泡。
移动端可点击区域太小，不是样式没写够，而是热区没“活”过来——浏览器默认只把文字或控件本身当可点区域，padding加在错的元素上、display类型不对、或者 DOM 结构断了，都会让手指点下去毫无反应。
为什么 padding 加了还是点不中
常见错误是把 padding 加在 li 或 div 上，而真正要响应点击的是里面的 a 或 button。浏览器不会把父容器的内边距“继承”为子元素的可点击范围。
-
a标签必须显式设为display: inline-block或display: block，否则padding-top/padding-bottom在旧版 Safari 中可能被忽略 - 别用
line-height或height硬撑高，容易裁切热区；优先靠padding+min-height扩展 - 检查父级是否设了
overflow: hidden、clip-path或pointer-events: none，这些会直接截断可点击区域 - 用 Chrome DevTools 的「Computed」面板确认最终生效的
width、height、padding值，别信视觉预估
label 包裹 checkbox/radio 为何有时失效
label 是最轻量、最无障碍友好的热区扩展方式，但它有三个硬性条件：input 必须是 label 的**直接子节点**、不能被隐藏、label 自身要有渲染尺寸。
- React/Vue 中用条件渲染或
<template>导致input脱离labelDOM 子树，热区立即断裂 -
input设了display: none、visibility: hidden或opacity: 0，热区映射就断了 -
label默认是display: inline，无宽高，必须加display: inline-block+min-height: 44px+padding - 移动端务必加
touch-action: manipulation，否则 iOS Safari 可能延迟 300ms 或忽略快速 tap
按钮和链接的最小触控尺寸怎么兜底
W3C 推荐触控目标 ≥ 44×44px，但实际渲染受字体缩放、DPR、CSS 缩放影响。不能只靠文字撑开，得用 CSS 强制兜底。
立即学习“前端免费学习笔记（深入）”；
- 对
button和a统一设：min-width: 44px、min-height: 44px、padding: 12px 16px - 图标按钮（无文字）必须加
min-width/min-height，否则在 iPhone 上可能缩成 20px 宽 - 禁用
-webkit-tap-highlight-color: transparent时，一定要补足padding，否则用户完全感知不到点击是否生效 - 避免给按钮设
touch-action: none，这等于主动关闭原生点击通道
深层嵌套如何悄悄拖慢点击响应
DOM 深度超过 6 层时，touchstart 事件从最内层冒泡到监听器的路径变长，低端安卓机上延迟可翻倍。这不是 JS 性能问题，是 HTML 结构本身在拖慢事件分发。
- 用 Chrome DevTools → Elements 面板右键任意元素 → «Show DOM properties» 查看
depth值，超 6 就该重构 - 砍掉只为加 class 或 JS 选择器套的
div，改用display: contents（Safari 15.4+ 支持）抹除渲染层但保留语义流 - 导航菜单控制在
nav > ul > li > a这类 4 层以内，别写成nav > div > section > article > div > a - 动态插入内容时，用
DocumentFragment批量 append，别循环appendChild触发多次 layout
真正难处理的不是“怎么加 padding”，而是当多个交互层叠加、又用 JS 动态控制显隐、再混入 ARIA 状态同步时，热区映射、事件捕获、焦点管理三者稍有错位，点击就变成玄学——这时候得回到 DOM 结构本身，一行行查 pointer-events、display、aria-expanded 是否始终可信。
