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

Question

我有两个inputs 类型为radio。对于每个input，都有一个对应的label，里面有一个button。

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

但是，这不会发生。如以下sn-p所示，悬停并按下按钮确实会触发单选按钮中相应的样式更改，但单击动作不会选择输入，即使简单标签按预期工作。

我检查了buttons 是labels 的合法子代。 Labels 允许 Phrasing Content，按钮是 Phrasing Content，所以那里应该一切正常。

我还尝试为两个按钮的单击事件添加一个事件侦听器，并在其中调用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. label 一次只能与一个表单控件关联。 for 属性指向具有匹配 ID 属性的元素这一事实证明了这一点。

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

   我猜测单选按钮无法正常工作的事实是这种情况的副作用。可能是因为单选按钮和button 元素中的某些激活行为。

   我检查了buttons 是labels 的合法子代。标签允许短语内容，按钮是短语内容，所以一切都应该没问题。

   验证器确实会在您的标记中产生以下错误：

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

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

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