当标签只有一个按钮时，按钮单击不会（完全？）触发标签

Question

我有两个input类型radio。每个input都有一个对应label的button内部。

我期望单击按钮与单击标签具有相同的效果：将检查相应的输入。

然而，这不会发生。如以下代码段所示，悬停并按下按钮确实会触发单选按钮中相应的样式更改，但即使简单标签按预期工作，单击操作也不会选择输入。

我已经检查过buttons 是 s 的合法孩子label。标签允许短语内容，按钮是短语内容，所以一切都应该没问题。

我还尝试向两个按钮的单击事件添加一个事件侦听器，并在其中调用event.preventDefault()，只是为了确保按钮的默认行为不会阻止事件冒泡到标签，但无济于事，标签正在接收事件。

由于这在浏览器之间似乎是一致的（在 Firefox 41a 和 Opera 31b / Chrome 44 上测试）：

1. 我失踪了这里发生了什么？
2. 如何在没有技巧的情况下实现这一点（例如将标签设置为按钮的样式）？

<div>
  <input type="radio" name="A" id="one" />
  <label for="one">One</label>
  <label for="one">
    <button type="button">One</button>
  </label>

  <input type="radio" name="A" id="two" />
  <label for="two">Two</label>
  <label for="two">
    <button type="button">Two</button>
  </label>
</div>

Answer 1

1. Alabel一次只能与一个表单控件关联。for属性指向具有匹配 ID 属性的元素这一事实证明了这一点。

   你有一个button是你的后代label；对此的预期解释是 thelabel作为 的标签button。但是，您正在尝试将单选按钮而不是button元素与label. 这里真正的问题是表单控件和label;之间存在冲突。它无法确定它应该关联到哪个控件。

   我猜单选按钮不能正常工作的事实是这个的副作用。也许这取决于单选按钮和button元素中的某些激活行为。

   我已经检查过buttons 是 s 的合法孩子label。标签允许短语内容，按钮是短语内容，所以一切都应该没问题。

   尽管如此，验证器确实会在您的标记中产生以下错误：

   错误：具有属性button的label元素的任何后代都for必须具有与该for属性匹配的 ID 值。

   这是因为label具有for属性的元素需要有一个具有该 ID 值的表单控件for才能指向该属性，即使该控件是其label自身的后代。但是您不能将相同的 ID 分配给多个元素。结果就是前面提到的冲突。

2. 在不知道您要在这里完成什么的情况下，如果您只想要label按钮的外观，我可以给出的最佳建议就是将其样式设置为这样。