Javascript - 作为超链接的 Div 框 + 嵌套文本超链接 - 可能吗？答案

【问题标题】：Javascript - Div Box as a HyperLink + Nested Text HyperLink - Possible?Javascript - 作为超链接的 Div 框 + 嵌套文本超链接 - 可能吗？
【发布时间】：2013-06-27 21:48:39
【问题描述】：

看起来好像嵌套锚标签是不可能的，是否可以使用 Javascript 来让 Div Box 超链接到 Page-A，同时在 Div Box 中拥有一个 Text 的单词到 Page-B 的超链接？

已尝试使用以下 Javascript（用于超链接框或文本，但不能同时使用两者）：

<script type="text/javascript">

  // Content-Link Click Events

  $('.content-link-page-a').click(function(){
    window.location.href = "page-a.html";
  });

  $('.content-link-page-b').click(function(){
    window.location.href = "page-b.html";
  });

</script>

这是一些 CSS：

<style>
  .box {
    height: 50px;
    width: 100px;
    border: 1px solid #000;
  }
</style>

这是 HTML：

<div class="box content-link-page-a">
      <div id="username" class="content-link-page-b">UserName</div>
</div><!--/box-->

【问题讨论】：

嵌套链接令人困惑。不要使用它们。
可以，虽然框需要超链接某处，框内的一段文字需要链接到其他地方，所以需要解决方案
尝试从内部 DIV 周围移除，并且可以肯定的是，在 CSS 中为内部 DIV 提供更大的 z-index。可能它会以这种方式工作，因为内部 DIV 将首先捕获点击事件。另外，您可能应该调用 e.preventDefault();在您的点击处理程序的末尾。
我读了你的问题，但我只是说你应该找到更好的方法来实现你的结果。嵌套的锚标记不是有效的 HTML 是有原因的。
@ZoltánTamási ..你能用 z 索引添加答案吗？尝试了一个简单的实现，但是框和文本仍然链接到 PageA （父内容链接）.. 尝试使用和不使用内部锚点，尽管根据每个人的 cmets 和最佳实践似乎没有方法

标签： javascript html text hyperlink

【解决方案1】：

您应该从内部 DIV 周围移除 A，给它一个比外部更大的 z-index，并通过调用 event.stopPropagation 来处理内部点击事件，以防止事件冒泡到外部 div。 Here is a fiddle解决任务。

内部处理程序示例：

$('.content-link-page-b').click(function(e){
    alert("page-b.html");
    e.stopPropagation();
});

编辑：在我上面的评论中，我提到了 e.preventDefault() 调用。我不是那个意思，因为这意味着原生 DOM 元素的处理程序将被阻止，而不是 jQuery 事件冒泡。

【讨论】：