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

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,它有点不同.

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

Answer 2

简单回答一个问题:不.

话虽这么说,这是一个纯粹的html/css解决方法:

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

尽管我完全同意所选答案，是的，您不应该在 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”时隐藏这个框。否则，它应该像一个简单的 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);
    });

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