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

Question

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

问题是：

<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>

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

Answer 1

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

虽然使用

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>

HTML 标准不允许在

<label>

中添加额外的交互元素：

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

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

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

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

这不是很好，所以我的建议是不要依赖

for

属性来解决点击问题，而是将其分离并自己实现点击行为。

使用

<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>

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