在锚标记内创建锚标记

Question

在我的随机测试期间,我看到了一种行为,我将锚标记放在另一个锚标记内.我做了一个jsfiddle.

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

但在开发人员工具中它看起来不同:

我相信我们不能将锚标记放在另一个锚标记内,因为单击内部锚点会将click事件冒泡到父锚标记,这不应该被允许.

我的假设是否正确？

Answer 1

正如@ j08691所描述的那样,aHTML语法中禁止使用嵌套元素.HTML规范没有说明原因; 他们只是强调规则.

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

所以如果你写<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>.)

Answer 2

嵌套链接是非法的.

由A元素定义的链接和锚点不得嵌套; A元素不得包含任何其他A元素.

Answer 3

您可以使用对象标记解决此问题。如

<a><object><a></a></object></a>

Answer 4

我遇到了与 @thinkbonobo 相同的问题，并找到了一种无需JavaScript的方法：

.outer {
  position: relative;
  background-color: red;
}
 
.outer > a {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
 
.inner {
  position: relative;
  pointer-events: none;
  z-index: 1;
}
 
.inner a {
  pointer-events: all;
}

<div class="outer">
  <a href="#overlay-link"></a>
  <div class="inner">
    You can click on the text of this red box. It also contains a
    <a href="#inner-link">W3C compliant hyperlink.</a>
  </div>
</div>

诀窍是使锚点覆盖整个.outerdiv，然后为内部div中的所有其他锚点赋予正值z-index。完整功劳归于https://bdwm.be/html5-alternative-nested-anchor-tags/