div嵌套button与label：点击div任意区域为何触发按钮？

这是因为你将<div>和<button>都嵌套在了<label>标签内部。按照HTML的规范，<label>元素的核心作用之一就是扩大关联表单控件的可交互范围——当点击<label>内部的任意内容时，都会触发其绑定的表单控件的对应事件（比如点击事件）。

在你的代码里，<button>作为表单控件被<label>完整包裹，所以整个<label>覆盖的区域（也就是内部<div>的全部范围）的点击操作，都会被映射到<button>的点击事件上，最终导致点击div的任何位置都会触发按钮的点击行为。

如果想避免这种情况，你可以选择两种方式：

• 把<button>从<label>中移出，通过for属性关联按钮的id，示例代码如下：

<label for="targetBtn">点击这里触发按钮</label>
<div style="height: 100vh">
    <button type="button" id="targetBtn">Hmm?</button>
</div>

• 直接移除外层的<label>标签，仅保留按钮和div的结构。

内容的提问来源于stack exchange，提问作者Matías Santurio