关于html：是否允许将链接嵌套在链接内？


Are you allowed to nest a link inside of a link?

这看起来很基础，是否允许您将链接放在链接内？ 请参见下面的图片：

enter image description here

我试图使整个灰色条都可单击以转到某个位置，但是如果用户单击滚轮或移动箭头，则它们是其他链接。 查看我当前的代码：

1
    <?php echo $v; ?>

这是一个好习惯吗？ 我做错了吗？ 你会怎么做？
谢谢您的帮助！

相关讨论

直接来自W3C for HTML4：

12.2.2嵌套链接是非法的

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

由于DTD将LINK元素定义为空，因此LINK元素也不能嵌套。

HTML 5

对于HTML5，则有所不同。

您不能在A元素中包含交互式内容。交互式内容包括锚标记。

相关讨论

简单回答这个问题：不。

话虽如此，这是一个纯html / css解决方法：

https://codepen.io/pwkip/pen/oGMZjb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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;
}
1
2
    This entire box is a hyperlink. (Kind of)
    I'm a W3C compliant hyperlink inside that box

相关讨论

将嵌套链接包装在object标签内：

1
2
3
    <?php echo $v; ?>
    <object></object>
    <object></object>
相关讨论

尽管我完全同意所选的答案，是的，但是您不应该在A元素中包含交互式内容，有时您可能需要解决此问题的方法。

这是一个示例，您需要在A标签内放置一个交互式元素。右上方的小关闭按钮。

Interactive element in an A tag

这是HTML。 (这不是实际的版本，我简化了一点)

1
2
3
4
5
6
7
8
9
10
    <span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
    <img src="images/camera.svg" width="50" alt="Camera" />
   
        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>
   
   
        + 25 K

因此，基本上，我们希望在用户单击" X"时隐藏此框。否则，它应该像简单的A标签一样工作。这是完成技巧的jQuery。

1
2
3
4
5
6
7
8
$('.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);

    });

我希望这对遇到同样问题的人有所帮助。 ;)

我将对其重新设置样式，使其更像这种格式：

1
 
相关讨论

从技术上说，这不是解决问题的方法，但另一个解决方法是将click事件绑定到span或div：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  Outer Link
  <span class='inner-link'>Inner Link</span>


$('.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;
});

嵌套链接是非法的。要实现与嵌套链接相同的行为，可以执行以下操作：

如下所示，使用@mikevoermans HTML格式并绑定click事件

1
 

您的点击事件应如下所示：

1
2
3
4
5
6
$(".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
});

一种解决方案是将链接绝对定位在父链接容器内部

1