div和标签中的按钮:为什么单击div中的任何位置都会触发按钮?

这是由于 <label> 标签,查看此 MDN page
从本质上讲,由于输入(本例中为按钮)位于标签内部,因此两者之间存在隐含的链接。
这样做会产生以下结果:

• 当用户单击或触摸/点击标签时,浏览器会将焦点传递给其相关联的输入(也会为输入引发相应的事件)。 增加了集中输入的命中区域 为任何试图激活它的人(包括那些使用触摸屏设备的人)提供了优势。

因此,由于标签中有一个div覆盖了整个屏幕,因此单击屏幕上的任何位置都意味着单击标签,从而隐含地单击按钮。