您是否允许在链接中嵌套链接？

Question

这看起来很基本，你是否允许在链接中放置一个链接？见下图：

我试图将整个灰色条点击到某个地方，但如果用户点击滚轮或移动箭头，则它们是其他链接。请参阅我当前的代码：

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

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

Answer 1

直接从W3C for HTML4：

12.2.2嵌套链接是非法的

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

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

HTML 5

对于HTML5 it is a little different。

你不能在A元素中拥有Interactive Content。 互动内容包含锚标记。

Answer 2

To simply answer the question: No.

That being said, here's a pure html/css workaround:

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>

Answer 3

将嵌套链接包装在对象标记内：

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

Answer 4

我会重新设计，以便更像这种格式：

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

Answer 5

虽然我完全赞同所选答案，是的，但不应在A元素中包含互动内容，有时您可能需要解决此问题。

以下是需要将交互式元素放入A标记内的示例。右上方的那个小关闭按钮。

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

因此，基本上我们希望在用户点击“X＆＃39;”时隐藏此框。否则，它应该像一个简单的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);

    });

我希望这可以帮助有同样问题的人。 ;）

Answer 6

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

使用@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>

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

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

Answer 7

从技术上讲，这不是问题的答案，另一个解决方法是将click事件绑定到span或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;
});

Answer 8

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

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