html - 在 anchor 标记内创建 anchor 标记

Question

在我的随机测试中，我看到了将一个 anchor 标记放在另一个 anchor 标记内的行为。我做了一个jsfiddle .

<a class="groupPopper">
     <a class="name"> content</a>
</a>​

但在开发者工具中它看起来不一样:

我相信我们不能将一个 anchor 标记放在另一个 anchor 标记内，因为点击内部 anchor 会将点击事件冒泡到父 anchor 标记，这是不允许的。

我的假设是否正确？

Answer 1

如@j08691 所述，嵌套的 a 元素在 HTML 语法中是被禁止的。 HTML 规范没有说明原因；他们只是强调规则。

在实践方面，浏览器在其解析规则中有效地强制执行此限制，因此与许多其他问题不同，违反规范是行不通的。解析器有效地将打开的 <a> 元素内的 a 开始标记视为在开始新元素之前隐式终止打开的元素。

所以如果你写 <a href=foo>foo <a href=bar>bar</a> zap</a> ，你不会得到嵌套元素。浏览器会将其解析为 <a href=foo>foo</a> <a href=bar>bar</a> zap ，即两个连续的链接后跟一些纯文本。

嵌套的 a 元素本质上没有什么不合逻辑的:它们可以实现为点击“foo”或“zap”激活外部链接，点击“bar”激活内部链接。但我没有看到使用这种结构的理由，HTML 的设计者可能也没有看到，所以他们决定禁止它，从而简化事情。

(如果你真的想模拟嵌套链接，你可以使用普通链接作为外部链接，并使用带有合适事件处理程序的 span 元素作为内部“链接”。或者，你可以复制链接:<a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>。)