第一反应是存在物理遮挡而非事件绑定错误；用开发者工具拖动选择可定位遮挡元素，常见原因包括浮动未清除、relative定位延伸、overflow:hidden裁剪异常及蒙层未设pointer-events:none。
检查元素是否被上层 DOM 节点物理遮挡
点击失效但视觉可见，第一反应不是 JS 绑错事件，而是某个 div、section 或装饰性 span 实际盖住了目标区域。打开开发者工具，用「选择元素」工具从按钮顶部缓慢向下拖动，看高亮框何时从目标元素跳到另一个元素——那个中途接管高亮的，就是遮挡源。
常见遮挡元凶包括：float 元素未清除、position: relative + margin-top 向上延伸的边界框、overflow: hidden 父容器裁剪后意外暴露子层、以及未设 pointer-events: none 的蒙层或图标。
- 临时验证：给疑似遮挡元素加
outline: 2px solid red，立刻暴露覆盖范围 - 真机测试时特别注意 iOS Safari ——
touch-action: none会让label文字点击静默失效，看起来像被遮住 - 避免对
button自身设overflow: hidden，它会裁掉内部span或p的定位偏移，造成文字“消失”
修复浮动导致的热区漂移与层叠
float: right 或 float: left 是热区失控的高频诱因。浮动元素脱离文档流，其父容器高度塌陷，下方元素的 margin-top 不会“推开”它，反而让自身 bounding box 向上延伸，直接覆盖浮动按钮右半区域。
典型场景：Bootstrap 表单中 Email 输入框右侧加了 style="float: right" 的检查按钮，下方紧邻一个 <div class="col text-center"> 并设了 <code>margin-top: 100px —— 这个 100px 就是覆盖源。
立即学习“前端免费学习笔记（深入）”；
- 根本解法不是加
z-index，而是移除所有float，改用display: flex+justify-content: flex-end - 若必须保留浮动，务必在浮动容器末尾加清除元素：
<div style="clear: both"></div>或用伪类::after清除 - 检查
.tab类等组件是否用了float: left却没包裹在clear容器里，否则整个 tab 区域无高度，后续区块自然上浮重叠
约束 inline 元素的点击热区边界
a、span 默认是 inline，它们的可点击区域受 line-height 和 vertical-align: baseline 影响，底部常多出空白热区；padding 会直接扩大热区，而 margin 不会（除非父容器 overflow: hidden 且子元素溢出）。
例如 <a href="#">Click me</a> 在移动端常出现“点中了但跳转错页面”，就是因为 line-height: 2 让热区向下多出 1em，误触了下方按钮。
- 对关键交互元素，显式设
display: block或display: inline-block，切断line-height对热区的干扰 - 用
vertical-align: top替代默认baseline，收束 inline 元素底部空白 - 禁用
touch-action: none—— 它在 iOS Safari 下会让label点击完全无响应，现象极像被遮挡
验证 label 与 input 的隐式关联是否断裂
label 的热区应完整包含其内部 input，但 HTML 结构稍有偏差就会失效：<label><input></label> ✅；<label>\n<input></label> ❌（换行生成 text node，破坏隐式关联）。
更隐蔽的问题是 Flex 布局中未设 align-items: center，导致 input 垂直偏移，部分区域脱离 label 热区；或者父级 z-index 遮挡了 label 文字层。
- 检查
label的 computed styles，确认for属性值与input的id严格一致（大小写、空格、连字符） - 在开发者工具中悬停
label，看高亮是否同时覆盖文字和input；若只高亮文字，说明关联失败或input被其他样式推离 - 避免在
label上设opacity: 0—— 它仍捕获事件，但用户看不见反馈，误以为不可点
pointer-events: none，就依然能拦截点击。别只盯着“看得见”的元素。
