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

在我的随机测试中，我看到一个行为，我把一个锚标签放在另一个锚标签中。我发了一封信

内容
​

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

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

我的假设正确吗？

这是无效的HTML

不能嵌套

a

元素

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

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

---

正如@j08691所描述的，HTML语法中禁止嵌套

a

元素。HTML规范没有说明原因；他们只是强调规则

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

zap

，您将不会得到嵌套的元素。浏览器将其解析为

zap

，即两个连续的链接，后跟一些纯文本

嵌套的

a

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

---

（如果您确实想模拟嵌套链接，可以使用普通链接作为外部链接，使用带有合适事件处理程序的

span

元素作为内部“链接”。或者，您可以复制链接：

）

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

---

不要那样做。我在我的应用程序中遇到了同样的问题。 您只需在顶部和顶部添加

标记即可 确保在脚本文件中也为myDiv添加了click事件

---

window.location.href=“#仪表板详细信息”
当我试图通过“还有按钮”使div面板可单击时，偶然发现了这个问题。我建议的解决方法是使用javascript事件

下面是我创建的一个代码笔示例。。。。

以下是其中的html部分：

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

如果你说跑

更多



如果你说隐藏…


注意如何捕获内部链接的事件并使用stopPropagation（）。这对于确保外部触发器不运行至关重要。
不能嵌套“a”标记。相反，将外部容器设置为“位置：相对”，将第二个“a”设置为“位置：绝对”，并增加其z索引值。你会得到同样的效果

<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>

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

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

单击内部事件后，使用e.stopPropagation（）
 我知道这是一篇老文章，但我想指出，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>


* {
填充：0；
边距：0边框：0；
大纲：0；
}
.外锚{
显示：内联块；
填充：5px 8px；
保证金：2倍；
边框：1px实心#252632；
边界半径：3px；
背景：#1c1d26；
颜色：#fff；
文本阴影：0 1px 0#6161；
盒影：1px 1px 3px#000；
变换：translateY（0）；
过渡：背景250ms；
}
.内锚{
显示：内联块；
填充：5px 8px；
保证金：2倍；
边框：1px实心#252632；
边界半径：3px；
背景：#1c1d26；
颜色：#fff；
转换：转换（0px）；
}
.内锚：悬停{
背景：647915；
}
我拥有as@thinkbonobo，并找到了一种不用JavaScript的方法：


.outer{
位置：相对位置；
背景色：红色；
}
.outer>a{
位置：绝对位置；
顶部：0；左侧：0；底部：0；右侧：0；
}
.内部{
位置：相对位置；
指针事件：无；
z指数：1；
}
.内部a{
指针事件：全部；
}

您可以单击此红色框的文本。它还包含一个
这背后的原因是什么？只是想得到更多的澄清。我不知道它背后的确切原因，但是我想说，至少在语义上，嵌套链接是没有意义的。更不用说嵌套了
href
值的实际链接似乎毫无意义。这也是我的假设。只是想更确定一点。因为我可以把另一个标签（如span）放在一个标签里。这一点都没有意义。假设您有一个outter锚点，其样式为大型块级元素。现在，在那个大街区的某个地方，在一个任意的位置，你需要一个单跨水平锚，把你带到另一个地方。例如，使用#注释快捷方式。如果不使用嵌套锚，就无法做到这一点。@DanielJames-这毫无意义。这背后的原因是什么？只是想得到更多的澄清。@Sushil-回答我这个问题-嵌套的
a
元素的含义是什么？这可能意味着什么？是的，这没有任何意义，但这对我来说是新事物，所以我想确定，因为我可以用span，img。。锚定标记内的标记。@Sushil-当然，因为内容有意义。在命令中包含命令是不行的。@Anoop我知道这是一个非常古老的线程，但无论如何我会提供我的建议。我想，为什么不能在其他a标记中嵌套a标记，是因为当您单击嵌套链接时，浏览器将检测到同时单击了两个a标记（子标记）
<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>

<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>

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

    <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>