Html 在锚标签内创建锚标签

Creating anchor tag inside anchor tag

提问by Anoop

During my random testing I saw a behavior where I put an anchor tag inside another anchor tag. I made a jsfiddle.

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

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

But in the developer tool it appears different:

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

I believe we cannot put an anchor tag inside another anchor tag as clicking on the inner anchor will bubble up the click event to the parent anchor tag which should not be allowed.

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

Is my assumption correct?

我的假设正确吗？

回答by Jukka K. Korpela

As @j08691 describes, nested aelements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.

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

On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won't work. The parsers effectively treat an <a>start tag inside an open aelement as implicitly terminating the open element before starting a new one.

在实践方面，浏览器在其解析规则中有效地强制执行此限制，因此与许多其他问题不同，违反规范是行不通的。解析器有效地将<a>打开a元素内的开始标记视为在开始新元素之前隐式终止打开元素。

So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won't get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.

所以如果你写<a href=foo>foo <a href=bar>bar</a> zap</a>，你不会得到嵌套的元素。浏览器会将其解析为<a href=foo>foo</a> <a href=bar>bar</a> zap，即两个连续的链接后跟一些纯文本。

There is nothing inherently illogical with nested aelements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don't see a reason to use such a structure, and the designers of HTML probably didn't see one either, so they decided to forbid it and thereby simplify things.

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

(If you really wanted to simulate nested links, you could use a normal link as the outer link and a spanelement with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)

（如果你真的想模拟嵌套链接，你可以使用普通链接作为外部链接，span使用具有合适事件处理程序的元素作为内部“链接”。或者，你可以复制链接：<a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>。）

回答by j08691

Nested links are illegal.

嵌套链接是非法的。

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

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

回答by j08691

I had the same issueas @thinkbonobo and found a way to do it without JavaScript:

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

The trick is to make an anchor covering the whole .outerdiv, then giving all other anchors in the inner div a positive z-indexvalue. Full credit goes to https://bdwm.be/html5-alternative-nested-anchor-tags/

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

回答by user9147812

you can use object tag to solve this problem. such as

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

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

回答by ThinkBonobo

I stumbled upon this issue when trying to make a div panel clickable by also have buttons. The workaround that I recommend is to use javascript events.

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

Here is a codepen example I created.... http://codepen.io/thinkbonobo/pen/gPxJGV

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

Here's the html portion of it:

这是它的html部分：

Example of link embedded in link....

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

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

Notice how the event for the inner link is captured and stopPropagation() is used. this is critical to make sure the outer trigger doesn't run.

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

回答by Oded

It is invalid HTML.

它是无效的 HTML。

You can't nest aelements.

你不能嵌套a元素。

So, by definition, the behaviour is undefined.

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

回答by Adi Sekar

For nested anchors, to prevent the inner event from bubbling up to the outer event, you want to stop propagation as soon as the inner event is clicked.

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

OnClick of inner event, use e.stopPropagation();

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

回答by Old Sam

I know It's an old post, but I want to point out that user9147812 answer worked better than any other of the suggestions. This is how I stacked the whole thing.

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

回答by Vidya

You cannot nest 'a' tags. Instead set outer container as 'position:relative' and second 'a' as 'position:absolute' and increase its z-index value. You'll get the same effect.

您不能嵌套 'a' 标签。而是将外部容器设置为 'position:relative'，将第二个 'a' 设置为 'position:absolute' 并增加其 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>

回答by Rahul Varma

Don't do it like that. I was facing the same issue in my app. You can simply add <div>tag in top and <a>tags at child level. something like:

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

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

make sure you add click event for myDiv in your script file as well.

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

window.location.href = "#dashboardDetails";

window.location.href = "#dashboardDetails";