Javascript - Div Box作为HyperLink +嵌套文本HyperLink -可能吗？

Question

既然嵌套的Anchor标签是不可能的，那么可以使用Javascript来拥有指向Page-A的Div Box超链接，同时在指向Page-B的Div Box超链接中包含一个文本的单词吗？

我已经尝试使用以下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-->

Answer 1

您应该从内部DIV周围删除A，给它一个比外部更大的z索引，并通过调用event.stopPropagation来处理内部单击事件，以防止事件冒泡到外部div。Here is a fiddle来解决这个问题。

内部处理程序的示例：

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

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