84

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

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

但在开发者工具中，它看起来不同：

在此处输入图像描述

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

我的假设正确吗？

4

11 回答 11

127

正如@j08691 所述，aHTML 语法中禁止嵌套元素。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>。）

于 2012-10-24T17:55:25.387 回答
24

嵌套链接是非法的。

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

于 2012-10-24T15:38:25.483 回答
12

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

于 2018-08-29T11:25:35.297 回答
7

你可以使用对象标签来解决这个问题。如

<a><object><a></a></object></a>
于 2018-01-02T06:33:31.747 回答
4

当我试图通过也有按钮来使 div 面板可点击时，我偶然发现了这个问题。我推荐的解决方法是使用 javascript 事件。

这是我创建的一个 codepen 示例.... http://codepen.io/thinkbonobo/pen/gPxJGV

这是它的html部分：

链接中嵌入的链接示例....

<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
  If you say run<br>
  <button onclick="app.hitMe(event)">more</button><br>
  <br>
  And if you say hide...<br>
</div>

请注意如何捕获内部链接的事件并使用 stopPropagation()。这对于确保外部触发器不运行至关重要。

于 2016-01-14T18:49:35.490 回答
3

它是无效的 HTML。

您不能嵌套a元素。

因此，根据定义，行为是未定义的。

于 2012-10-24T15:38:21.940 回答
1

对于嵌套锚点，为了防止内部事件冒泡到外部事件，您希望在单击内部事件后立即停止传播。

OnClick 内部事件，使用 e.stopPropagation();

于 2018-04-27T18:56:19.130 回答
0

不要那样做。我在我的应用程序中遇到了同样的问题。您可以简单地<div>在顶部添加标签并<a>在子级别添加标签。就像是：

<div id="myDiv"><a href="#"></a>
     <a href="#"></a>
</div>

确保在脚本文件中添加 myDiv 的点击事件。

window.location.href = "#dashboardDetails";

于 2015-08-05T05:28:51.550 回答
0

您不能嵌套“a”标签。而是将外部容器设置为“位置：相对”，将第二个“a”设置为“位置：绝对”并增加其 z-index 值。你会得到同样的效果。

<div style="position:relative">
<a href="page2.php"><img src="image-1.png"></a>
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a>
</div>
于 2017-10-25T08:52:48.423 回答
0

我知道这是一篇旧帖子，但我想指出 user9147812 的回答比其他任何建议都好。这就是我堆叠整个东西的方式。

    <style>
    * {
      padding: 0;
      margin: 0 border:0;
      outline: 0;
    }

    .outer_anchor {
      display: inline-block;
      padding: 5px 8px;
      margin: 2px;
      border: 1px solid #252632;
      border-radius: 3px;
      background: #1c1d26;
      color: #fff;
      text-shadow: 0 1px 0 #616161;
      box-shadow: 1px 1px 3px #000;
      transform: translateY(0);
      transition: background 250ms;
    }
    .inner_anchor {
      display: inline-block;
      padding: 5px 8px;
      margin: 2px;
      border: 1px solid #252632;
      border-radius: 3px;
      background: #1c1d26;
      color: #fff;
      transform: translate(0px);
    }
    .inner_anchor:hover {
      background: #647915;
    }
    </style>


<a href="#">ItemX<object><a class="elim_btn" href="#" title='Eliminate'>&times;</a></object></a>
于 2018-06-17T19:04:02.237 回答
-6

这是一种不好的编码方式，但你可以试试这个 -

<a href="1">aaaa <table><tr><td><a href="2">bbbb </a></td></tr></table> </a>

于 2013-11-25T12:45:39.880 回答