单击标签内的按钮不会触发相应的输入

Question

我正在尝试通过隐藏它并在其父标签内添加一个按钮来更改

checkbox

的样式，如下所示：

<label onclick="console.log('label received click event')">
  <input type="checkbox" style="display: none" onchange="console.log('input value changed')">
  <button type="button">click here</button>
</label>

但是点击按钮并不会触发输入。 如果我使用

div

而不是

button

，则此设置有效：

<label onclick="console.log('label received click event')">
  <input type="checkbox" style="display: none" onchange="console.log('input value changed')">
  <div>click here</div>
</label>

这是预期的，并且也与标签文档匹配。我不明白的是，在这两种情况下，

click

事件都会冒泡到标签，因此标签会收到单击事件。与

div

或其他元素不同的按钮有什么特别之处？有没有办法让它发挥作用？

PS：我也尝试在

event.preventDefault()

上做一个

button

，但它没有改变任何东西。

Answer 1

无论行为如何，请勿在标签中包含多个元素。按钮当然不需要标签，如果你这样做，你的代码就会简单得多

<label><input type="checkbox" style="display: none" 
  onchange="console.log('input value changed')">Label for checkbox</label>

如果您想将按钮样式设置为复选框，您可以这样做

创建 CSS 外观，使按钮充当复选框