在锚标记内创建锚标记

Question

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

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

但在开发人员工具中，它看起来有所不同：

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

我的假设是否正确？

Answer 1

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

在实践方面，浏览器在解析规则中有效地强制执行此限制，因此与许多其他问题不同，违反规范将无效。解析器有效地将open <a>元素中的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

Nested links are illegal.

  

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

Answer 3

当我尝试通过按钮来点击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（）。这对于确保外部触发器不会运行至关重要。

Answer 4

您可以使用object标签来解决此问题。 比如

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

Answer 5

HTML无效。

您无法嵌套a元素。

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

Answer 6

我将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的锚，然后为内部div中的所有其他锚赋予一个正z-index值。功劳全归https://bdwm.be/html5-alternative-nested-anchor-tags/

Answer 7

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

点击内部事件，使用e.stopPropagation（）;

Answer 8

不要这样做。我的应用程序中遇到了同样的问题。 您只需在子级别的顶部和<div>标记中添加<a>标记即可。 类似的东西：

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

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

window.location.href = "#dashboardDetails";

Answer 9

你无法阻止＆＃39;标签。而是将外部容器设置为＆＃39; position：relative＆＃39;第二个＆＃39;作为＆＃39;职位：绝对＆＃39;并增加其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>

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

Answer 11

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

＆lt; a href =“1”＆gt; aaaa＆lt; table＆gt;＆lt; tr＆gt;＆lt; td＆gt;＆lt; a href =“2”＆gt; bbbb＆lt; / a＆gt;＆lt; / td＆gt;＆lt; / TR＆GT;＆LT; /表＆gt; ＆LT; / A＆GT;