嵌套在<label>内的<span>为何阻止其他嵌套元素触发复选框选中？

这种情况我之前也碰到过！核心问题其实是HTML标签的嵌套规则在搞鬼——<label>属于交互式元素，要是里面嵌套了块级元素比如<p>，浏览器的事件冒泡和关联逻辑会被打断，导致点击<p>里的object.name内容时，没法触发<label>绑定的复选框切换行为，只有没被块级元素包裹的<span>内容能正常触发。

解决方法其实很简单，二选一就行：

• 把包裹object.name的<p>标签换成行内元素（比如<span>），这样整个<label>内的元素都属于同一层级的交互式内容，点击任何地方都能触发复选框状态切换。
• 如果必须保留块级元素<p>，给它添加CSS样式pointer-events: none;，让点击事件穿透到外层的<label>上，同样能触发复选框切换。

举个例子，错误的结构可能是这样：

<label>
  <input type="checkbox" id="my-checkbox">
  <p>{{ object.name }}</p>
</label>

改成行内元素的正确结构：

<label>
  <input type="checkbox" id="my-checkbox">
  <span>{{ object.name }}</span>
</label>

或者保留<p>但添加穿透样式：

<label>
  <input type="checkbox" id="my-checkbox">
  <p style="pointer-events: none;">{{ object.name }}</p>
</label>

本质就是要保证<label>内的元素不会阻断点击事件传递，让浏览器能正确识别这是<label>关联的内容，从而触发复选框的状态切换。

内容的提问来源于stack exchange，提问作者lookininward