【问题标题】：Creating anchor tag inside anchor tag在锚标签内创建锚标签
【发布时间】：2019-01-16 23:13:54
【问题描述】：

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

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

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

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

我的假设正确吗？

【问题讨论】：

标签： html

【解决方案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 元素作为内部“链接”。或者，您可以复制链接：@987654329 @.)

【讨论】：

似乎至少一些最新的浏览器现在允许它。我有一个结构 a > div > a，Chrome 和 Firefox 在我编写它时都让它存在，并且在解析过程中它们不会解构它（我没有测试 Edge）。
说不可能真的没什么用，抱歉。
@trusktr 我也对其进行了测试，甚至像 a > div > a 这样的结构也出现了
，所以浏览器确实不允许嵌套链接（即使中间有一个div。
@G.Egli 啊，你是对的。我一定忽略了它，或者我是用纯 JavaScript 做的。解析器不允许这样做（在我看来，它不应该将您的 HTML 变形为您没有编写的内容）。以下是使用 JavaScript 实现的方法：jsfiddle.net/0ozfcn1d

【解决方案2】：

Nested links are illegal.

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

【讨论】：

这背后的原因是什么？只是想要更多的澄清。
我不知道它背后的确切原因，但是我会说至少在语义上嵌套链接没有意义。更不用说与嵌套的 href 值的实际链接似乎完全没有意义。
这也是我的假设。只是想更加确定。因为我可以将其他标签（例如跨度）放在 A 标签内。
这不是毫无意义的。假设您有一个外部锚点，其样式设置为大型块级元素。现在，在那个大块中的某个位置，在任意位置，您需要一个跨度级别的锚，它将您带到其他地方。例如#cmets 快捷方式。如果不使用嵌套锚点，就无法做到这一点。
@DanielJames - 这毫无意义。

【解决方案3】：

我将same issue 用作@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>

诀窍是制作一个覆盖整个.outer div 的anchor，然后为内部div 中的所有其他anchor 赋予一个正的z-index 值。全部功劳归https://bdwm.be/html5-alternative-nested-anchor-tags/

【讨论】：

【解决方案4】：

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

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

【讨论】：

这出奇的好。但是根据规范它是“合法的”吗？规范如此密集和复杂，很难确定。
@mpoisot 这是非常糟糕的做法和hacky。就 HTML 语法而言，这绝对是不合法或不建议的。如果您需要更多信息，请阅读此内容：w3.org/TR/html401/struct/links.html#h-12.2.2

【解决方案5】：

我在尝试通过也有按钮来使 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()。这对于确保外部触发器不运行至关重要。

【讨论】：

我不得不使用 event.preventDefault();在 Chrome 上
存在mmb-click无法在新标签页打开链接的问题。
不用JS也可以这样做，见下文my answer

【解决方案6】：

这是无效的 HTML。

您不能嵌套 a 元素。

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

【讨论】：

这背后的原因是什么？只是想要更多的澄清。
@Sushil - 回答我这个问题 - 嵌套的 a 元素是什么意思？这可能意味着什么？
是的，这没有任何意义，但它对我来说是新事物，所以我想确保我可以将 span、img .. 标签放在锚标签中。
@Sushil - 当然，作为 content 这是有道理的。在命令中包含 command 不会。
@Anoop 我知道这是一个非常古老的线程，但无论如何我都会提供我的建议。我猜为什么你不能在其他标签中嵌套一个标签是因为当你点击嵌套链接时，浏览器会检测到同时点击了两个 a 标签（子标签和父标签）。这意味着他们需要知道某种优先级，例如哪个标签更重要。浏览器也可能以不同于其他浏览器的方式处理优先级，并且开始为它创建规范变得不必要地棘手，因此最好避免允许将标签嵌套在一起。

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

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

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

window.location.href = "#dashboardDetails";

【讨论】：

【解决方案9】：

您不能嵌套“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>

【讨论】：

【解决方案10】：

我知道这是一篇旧帖子，但我想指出 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>

【讨论】：

【解决方案11】：

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

aaaa

bbbb

【讨论】：

除了看起来像 1996 年的浏览器黑客攻击外，这也行不通。至少在 Firefox 中，它会尝试通过在找到内部锚点的开始时关闭外部锚点来理解这一点。这也将涉及关闭 td、td 和 table 元素，然后在内锚关闭后再次重新打开它们。我在 WooCommerce 模板中看到了这种确切的行为，引发了一些非常时髦且不明显的格式问题，这导致我提出这个 SO 问题试图找到答案。