嵌套标签行为标准

Question

我想知道如果我嵌套2个<label>标签会发生什么,事实证明,在所有浏览器的所有最新版本中,除了Opera之外,单击内部标签会导致仅点击该标签.这是嵌套标签标签行为的演示.

我的问题是:在嵌套标签中处理点击事件时,浏览器的行为是否有任何标准？我所能找到的只是关于Gecko行为的MDN部分,但我找不到其他浏览器的内容.

究其原因,这是对我有意思是因为如果它是可以嵌套的标签标签,仍然能够与它最接近的周边标签,选择正确的输入,那么它有可能使类似的东西真棒这.如果没有在任何标准中定义嵌套标签行为(因此任何浏览器都可以做任何他们想做的事情),这根本不是一个选项,即使将来也不是.任何此类标签的格式为:

<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,这比仅仅做它更多的努力这条路.这是另一个演示(正如您所看到的,正确标记现在检查的标签是不可能的).

<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定义了用户激活交互式内容时会发生什么:

HTML中的某些元素具有激活行为,这意味着用户可以激活它们.这触发了一系列依赖于激活机制的事件,并且通常在click事件中达到顶点,如下所述.

"当点击指点设备时"的第3步说:

设e是用户指定的元素(如下所定义)中最近的可激活元素(如果有的话).

要查找最近的可激活元素,需要定义一种算法:

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

本节未明确包括交互式内容嵌套无效的情况.我不确定这个算法是否也适用于无效代码(可能不适用).但如果它适用,只有内部label应该开火.

Answer 2

在HTML5规范明确地说:

label元素不得包含任何嵌套的标签元素.

因此,浏览器处理嵌套标签的方式是未定义的.除此之外,for属性对可访问性和可用性很重要,不应忽略.