Html 是否允许在链接内嵌套链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9882916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are you allowed to nest a link inside of a link?
提问by denislexic
This may seem pretty basic, are you allowed to put a link inside of a link? See attached image below:
这可能看起来很基本，您是否允许在链接中放置链接？见下图：
I'm trying to have the whole grey bar clickable to go somewhere, but if the user clicks the wheel or the move arrow, they are other links. See my current code:
我试图让整个灰色条可点击到某个地方，但如果用户点击滚轮或移动箭头，它们是其他链接。查看我当前的代码：
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
<a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
<a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>
Is this a good practice? Am I doing it wrong? How would you do this? Thanks for the help!
这是一个好习惯吗？我做错了吗？你会怎么做？谢谢您的帮助！
回答by Josh
Straight from the W3C for HTML4:
直接来自 W3C 的 HTML4：
12.2.2 Nested links are illegal
12.2.2 嵌套链接是非法的
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 元素。
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
由于 DTD 将 LINK 元素定义为空，因此也不能嵌套 LINK 元素。
HTML 5
HTML 5
And for HTML5 it is a little different.
而对于HTML5 则有点不同。
You cannot have Interactive Contentinside an A element. Interactive Content includes anchor tags.
您不能在 A 元素中包含交互式内容。交互式内容包括锚标记。
回答by Jules Colle
To simply answer the question: No.
简单回答这个问题：没有。
That being said, here's a pure html/css workaround:
话虽如此，这是一个纯 html/css 解决方法：
https://codepen.io/pwkip/pen/oGMZjb
https://codepen.io/pwkip/pen/oGMZjb
.block {
position:relative;
}
.block .overlay {
position:absolute;
left:0; top:0; bottom:0; right:0;
}
.block .inner {
position:relative;
pointer-events: none;
z-index: 1;
}
.block .inner a {
pointer-events: all;
}<div class="block">
<a class="overlay" href="#overlay-link"></a>
<div class="inner">
This entire box is a hyperlink. (Kind of)<br><br><br><br>
<a href="#inner-link">I'm a W3C compliant hyperlink inside that box</a>
</div>
</div>回答by BENARD Patrick
Wrap your nested link inside an object tag :
将您的嵌套链接包裹在一个对象标签中：
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
<object><a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a></object>
<object><a href="#" class="t_icons t_icons_move sp_mngt_move"></a></object>
</a>
回答by omgitsdrobinoha
Although I totally agree with the selected answer and yes, you shouldn'thave Interactive Content inside an A element sometimes you may need a workaround to this.
尽管我完全同意所选的答案，是的，但您不应该在 A 元素中包含交互式内容，有时您可能需要解决此问题。
Here's an example where you needto put an interactive element inside an A tag. That little close button on the top right.
下面是一个示例，您需要在 A 标记中放置一个交互式元素。右上角的那个小关闭按钮。
Here's the HTML for this. (It's not the actual build, I made it a bit simpler)
这是用于此的 HTML。（这不是实际的构建，我简化了一些）
<a href="#">
<span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
<img src="images/camera.svg" width="50" alt="Camera" />
<em>
Upload a profile picture
<small>
Here's the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
</small>
</em>
<strong>
+ 25 K
</strong>
</a>
So, basically we want to hide this box when the user clicks on the 'X'. Otherwise, just it should work like a simple A tag. Here's the jQuery which did the trick.
所以，基本上我们想在用户点击“X”时隐藏这个框。否则，它应该像一个简单的 A 标签一样工作。这是成功的jQuery。
$('.hide').click(function(e) {
e.preventDefault();
e.stopPropagation(); // THIS IS THE KEY PART
// DO WHATEVER YOU WANT, I FADED OUT THE BOX FOR EXAMPLE
$(this).parent().fadeOut(300);
});
I hope this helps someone with the same problem. ;)
我希望这可以帮助有同样问题的人。;)
回答by mikevoermans
I would restyle it so that it is more like this format:
我会重新设计它，使其更像这种格式：
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
<a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
<a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>
回答by Epuri
Nested links are illegal. To achieve the same behavior as with nested links you can do the following:
嵌套链接是非法的。要实现与嵌套链接相同的行为，您可以执行以下操作：
Use @mikevoermans HTML format as shown below and bind click event
使用@mikevoermans HTML格式如下图，并绑定点击事件
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
<a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
<a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</div>
Your click event should look like this:
您的点击事件应如下所示：
$(".sp_mngt_bar").bind("click", function(e) {
var target = $(e.target);
if(target.has('.t_icons_settings') { //Do something for settings }
else if(target.has('.t_icons_move') { //Do something for move }
else { //Do something for sp_mngt_bar
});
回答by Savage
While technically not an answer to the question, another workaround is to bind the click event to a spanor div:
虽然从技术上讲不是问题的答案，但另一种解决方法是将 click 事件绑定到 a spanor div：
<a href="outer-link">
Outer Link
<span class='inner-link'>Inner Link</span>
</a>
$('.inner-link').click(function (e) {
// Prevent the click-through to the underlying anchor
e.stopPropagation();
// Go to a link
window.location.href = 'page.html';
// Or call a javascript method
doSomething();
return false;
});
回答by moto
One solution is to absolute position a link inside of the parent link container
一种解决方案是在父链接容器内绝对定位链接
<div style="position: relative">
<a href="#">
<h1><a href="#"<?php echo $v; ?></a></h1>
<div id="placeholder" style="height: 24px">
</a>
<div style="position: absolute; bottom: 0">
<a href="#"></a>
</div>
</div>
