标签内的按钮触发（有时是双触发\双击）

有类似的问题，但我没有足够的声誉来发布答案，所以我将其作为“新问题”

问题是：

<label>
  <button type="button">something 1</button>
  <button type="button">something 2</button>
  <input>
</label>

如果您单击标签内的任何位置 - 它将触发第一个按钮，而不是第二个按钮，不会聚焦到输入

那是因为label触发它首先在其中找到的任何东西

所以如果你点击something 2按钮 - 您将点击两次：标签将触发第一个按钮，您（作为用户）将触发第二个按钮

这实际上很容易解决

<label for="unique">
  <button type="button">something 1</button>
  <button type="button">something 2</button>
  <input id="unique">
</label>

这样标签总是知道到底要触发什么

一般建议是“不要将交互元素（例如锚点或按钮）放置在标签内。”

在使用时for属性可能会解决单击标签时出现的部分问题，但它会带来其他问题。

// don’t put buttons in labels!
<label for="unique">
  <button type="button">something 1</button>
  <button type="button">something 2</button>
  <input id="unique">
</label>

The HTML 标准不允许在 HTML 中添加额外的交互元素<label>首先：

内容模型：
短语内容，但没有后代可标记元素（除非它是元素的标记控件），并且没有后代标签元素。

所以这在今天可能有效，但由于标准不支持它，浏览器供应商可以自由地改变行为。

HTML 元素表示用户界面中项目的标题。

主要的标签的目的是为输入提供可访问的文本，以便用户知道要输入什么，即使使用屏幕阅读器或语音控制等辅助技术也是如此。因此，标签的文本内容将用于标记输入，同时考虑所有包含的文本。其标题为“某物 1 某物 2”。

这不是很好，所以我的建议是不要依赖for属性来修复点击问题，而是将其分离并自己实现点击行为。

Using a <fieldset>也将具有将控件分组为辅助技术的优势，因此将宣布进入或离开焦点组。

focusInput = e => e.currentTarget.querySelector('input').focus();
action = e => {
  alert('Action!');
  e.stopPropagation();
}

<fieldset onclick="focusInput(event)">
  <legend>Group Title</legend>
  <button type="button" onclick="action(event)">something 1</button>
  <button type="button" onclick="action(event)">something 2</button>
  <br>
  <label>
    Input Label
    <input>
  </label>
</fieldset>

请注意，没有键盘处理程序绑定到字段集，因为这将再次让键盘用户感到困惑。