嵌套标签的行为标准 [英] Standards on behaviour of nested labels

问题描述

我想知道如果我嵌套2 < label> 标签会发生什么，事实证明，在所有浏览器的所有最新版本中， em>（除了Opera ），点击内部标签只会导致该标签被点击。 这里是演示 的嵌套标签代码行为。

我的问题是：在处理嵌套标签中的点击事件时，浏览器的行为是否有任何标准？我可以找到此MDN部分关于Gecko的行为，但我找不到任何关于其他浏览器。

这对我很有趣的原因是因为如果可以嵌套标签标签，仍然可以选择正确的输入与其最接近的周围标签，那么可以做出真棒的东西，如 这 。如果嵌套标签行为不是在任何标准中定义的（所以任何浏览器都可以做任何他们想要的），这将不是一个选择，甚至在未来。任何此类标签的格式为：

 < label> 
< input type =radioname =1> 
< span>显示标签< / span> 
< div>标签内容< / div> 
<！ -  repeat，在这里进一步设置相同格式的< label> s  - > 
< / label> 
 

当不嵌套标签时，此制表符系统已经可以使用了 属性添加到标签， id 添加到输入，但是您必须担心每个输入的唯一ID，比这样做更多的努力。 这里 是另一个演示（您可以看到，这是不可能的以正确标记现在检查的标签。

 < label for =tabN> 
< span>显示标签< span> 
< / label> 
< input type =radioname =1> 
< div>标签内容< / div> 
<！ -  repeat，在这里放置更多相同格式的结构 - > 
  

PS：请不要回答这个问题，这不是什么输入和标签设计做！。我知道，我只是想知道是否有任何希望，这成为可能，包括在Opera。

解决方案

知道，它不允许嵌套 c


手写内容，但没有后代的可标记元素，除非它是元素的标记控件，且没有后代标签元素。




HTML5定义了用户激活互动内容：

HTML中的某些元素具有激活行为，用户可以激活它们。这将触发依赖于激活机制的事件序列，并且通常在点击事件中结束，如下所述。

点击指点设备时的第3步：

是用户指定的元素的最近可激活元素（如果有）。

$ b b

要查找最近的可激活元素，可以使用算法定义：

1. 如果目标
如果目标有父元素，则设置目标

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

I was wondering what would happen if I'd nest 2 <label> tags, and it turns out, in all the most recent versions of all browsers, except for Opera, clicking the inner label results in only that label being clicked. Here's a demo of nested label tags' behaviour.

My question is: Are there any standards on the behaviour of browsers when handling click events in nested labels? All I could find was this MDN section about Gecko's behaviour, but I couldn't find anything about the other browsers.

The reason this is interesting to me is because if it is possible to nest label tags and still be able to select the correct input with its closest surrounding label, then it's possible to make awesome things like this. If nested label behaviour is not defined in any standards (so any browser could do whatever they want), this won't be an option at all, not even in the future. The format for any of such tabs would be:

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

This tab system is already possible when not nesting labels, by assigning a for attribute to the label, and an id to the input, but then you'd have to worry about unique ids for every input, and that's a lot more effort than just doing it this way. Here is another demo of that (and as you can see, it's impossible to correctly mark the label that is checked now).

<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: Please don't answer this question with "this is not what inputs and labels were designed to do!". I know that, I am just wondering about if there are any hopes for this becoming possible, including in Opera.

解决方案

As you know, it is not allowed to nest label elements, as label has the following content model:

Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.

HTML5 defines what happens when a user activates interactive content:

Certain elements in HTML have an activation behavior, which means that the user can activate them. This triggers a sequence of events dependent on the activation mechanism, and normally culminating in a click event, as described below.

Step 3 of "When a pointing device is clicked" says:

Let e be the nearest activatable element of the element designated by the user (defined below), if any.

To find the nearest activatable element, an algorithm is defined:

1. If target has a defined activation behavior, then return target and abort these steps.
2. If target has a parent element, then set target to that parent element and return to the first step.
3. Otherwise, there is no nearest activatable element.

This section doesn’t explicitly include the case of an invalid nesting of interactive content. I’m not sure if this algorithm also applies for invalid code (probably not). But if it would apply, only the inner label should fire.

这篇关于嵌套标签的行为标准的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！