嵌套标签行为标准

Question

我想知道如果我嵌套 2 个 <label> 标记会发生什么，结果发现，在所有浏览器的所有最新版本中，除了 Opera，单击内部标签仅导致单击该标签。 Here's a demo 嵌套标签标签的行为。

我的问题是：在处理嵌套标签中的点击事件时，浏览器的行为是否有任何标准？我只能找到关于 Gecko 行为的 this MDN section，但我找不到任何东西关于其他浏览器。

这对我来说很有趣的原因是因为如果可以嵌套标签标签并且仍然能够选择正确的输入及其最接近的周围标签，那么就有可能做出像 this。如果嵌套标签行为没有在任何标准中定义（因此任何浏览器都可以做他们想做的任何事情），这根本不是一个选项，即使在未来也是如此。任何此类选项卡的格式为：

<label>
    <input type="radio" name="1">
    <span>Shown label</span>
    <div>Contents of the tab</div>
    <!--repeat, put further identically-formatted <label>s here-->
</label>

当不嵌套标签时，这个选项卡系统已经成为可能，通过将 for 属性分配给标签，将 id 分配给输入，但是你必须担心每个输入的唯一 ID，并且这比这样做要付出更多的努力。 Here 是另一个演示（如您所见，现在无法正确标记已检查的标签）。

<label for="tabN">
    <span>Shown label<span>
</label>
<input type="radio" name="1">
<div>Contents of the tab</div>
<!--repeat, put further identically-formatted structures here-->

PS：请不要用“这不是输入和标签的设计初衷！”来回答这个问题。我知道，我只是想知道这是否有可能实现，包括在 Opera 中。

Answer 1

如您所知，不允许嵌套label 元素，因为label 具有以下内容模型：

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

HTML5 定义了当用户激活interactive content 时会发生什么：

HTML 中的某些元素具有激活行为，这意味着用户可以激活它们。这会触发一系列取决于激活机制的事件，通常会在click 事件中达到高潮，如下所述。

“点击指针设备时”的第 3 步说：

让e成为用户指定的元素（定义如下）的最近的可激活元素，如果有的话。

为了找到最近的可激活元素，定义了algorithm：

1. 如果 target 具有已定义的激活行为，则返回 target 并中止这些步骤。
2. 如果 target 有父元素，则将 target 设置为该父元素并返回第一步。
3. 否则，没有最近的可激活元素。

本节没有明确包括交互式内容嵌套无效的情况。我不确定这个算法是否也适用于无效代码（可能不是）。但是如果它会适用，只有内部的label 应该触发。

Answer 2

html5 spec 明确表示：

标签元素不能包含任何嵌套的标签元素。

因此，浏览器处理嵌套标签的方式是未定义的。除此之外，for attributes are important for accessibility 和可用性不应被省略。