<a>当外部链接是内部的另一个链接时，外部链接不会包装元素

<a> link outside doesn't wrap element when it's another link inside

本文关键字：链接 外部 元素 包装 另一个 内部      更新时间：2023-09-26

我在<div>外部创建了一个<a>链接来包装整个元素并赋予它display: block属性，但是当我在<div>内创建另一个<a>链接时，仅将一些文本包装在<div>内，外部链接变得height: 0。

它是否能够将一个链接组合在另一个链接中？

我制作了 jsfiddle 示例来展示我想要实现的目标，因此如果没有内部链接，整个红色矩形将包装为链接，但是当我添加内部链接时，仍然没有链接包装矩形。

JSFiddle 示例 - http://jsfiddle.net/ynbc2d6f/2/

不，您不能嵌套链接。发生的情况是，浏览器然后通过关闭元素来补偿无效的 HTML 以使其有效，因此您的原始：

<a class = "big-link" href = "http://www.google.com">    
    <div class = "big">
        <a class = "small-link" href = "http://www.facebook.com">One</a>
    </div>
</a>

成为：

<a class="big-link" href="http://www.google.com"></a>
<div class="big">
    <a class="big-link" href="http://www.google.com"></a>
    <a class="small-link" href="http://www.facebook.com">One</a>
</div>

在可点击的元素中不能有可点击的元素。看：

http://www.w3.org/TR/html5/dom.html#interactive-content-0

根据 HTML 链接上的 W3C 规范

A 元素

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

建议：将外部链接更改为div 块，并向其中添加点击事件侦听器。 

$('.big-link').on('click', function() {
  location.href = $(this).data('href')
});
.big-link {
  display: block;
  line-height: 100%;
  margin-top: 50px;
  cursor: pointer;
}
.big {
  height: 50px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big-link" data-href="http://www.google.com">
  <div class="big">
    <a class="small-link" href="http://www.facebook.com">One</a>
  </div>
</div>

香草JS版本

document.getElementsByClassName('big-link').item(0).addEventListener('click', function(el) {
  location.href = el.dataset.href;
});
.big-link {
  display: block;
  line-height: 100%;
  margin-top: 50px;
  cursor: pointer;
}
.big {
  height: 50px;
  background-color: red;
}
<div class="big-link" data-href="http://www.google.com">
  <div class="big">
    <a class="small-link" href="http://www.facebook.com">One</a>
  </div>
</div>

相关文章：