在锚定标记内创建锚定标记

Question

在我的随机测试中，我看到了一个行为，我把一个锚标签放在另一个锚标签里。我做了一个jsfiddle。

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

但在开发人员工具中，它似乎有所不同：

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

我的假设正确吗？

Answer 1

我遇到了与@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;
}

html lang-html prettyprint-override"><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>

Answer 2

嵌套链接是非法的。

由A元素定义的链接和锚不能嵌套；A元素不能包含任何其他的A元素。

Answer 3

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

实际上，浏览器在其解析规则中有效地实施了这一限制，因此与许多其他问题不同，违反规范是行不通的。解析器有效地处理

所以如果你写

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

（如果您真的想模拟嵌套链接，您可以使用普通链接作为外部链接，使用带有合适事件处理程序的span元素作为内部链接。或者，您可以复制链接：