如何使用内部href使div可点击但不覆盖其他内部href答案

【问题标题】：How to make div clickable using internal href but not override other internal hrefs如何使用内部href使div可点击但不覆盖其他内部href
【发布时间】：2011-01-18 23:31:04
【问题描述】：

我有一个带有 3 个内部 href 的 div。我需要使 div 可点击并让它继承内部 href 之一。没问题...但是这会导致 JS 覆盖 div 内的其他链接，这些链接我没有为父 div 继承。这是我的代码：

<script>
$(document).ready(function(){   
$("#Products div.product").click(function(){
    window.location=$(this).find("a.product_link").attr("href"); return false;
    }
);
</script>
<div class="product">
<div class="icon">
<a href="/training/programme/fire-awareness-in-the-workplace" class="product_link" title="Fire Awareness in the Workplace"><img src="/assets/public/btn_FA_icon.gif" alt="image" width="70" height="70" /></a>
</div>
<div class="summary">
<h2>Fire Awareness in the Workplace</h2>
<p>All staff must complete fire awareness training - this excellent programme is all you need to train your employees at minimum cost and disruption.</p>
</div>
<div class="btns">
<a href="/purchase/single/FA" class="single" title="Buy Now...">Buy Now...</a>
<a href="/training/preview/FA" class="single" title="Free Trial...">Free Trial...</a>
</div>
</div>

那么...有什么想法吗？ :)

【问题讨论】：

标签： javascript jquery click href inheritance

【解决方案1】：

尝试从你的锚中杀死propagation of the event

$("a.single").click(function(event){
  event.stopPropagation();
});

【讨论】：

【解决方案2】：

尝试将 div 的 z-index 设置为 999，并将 div 中的链接的 z-index 设置为 -1。

.btns{z-index:999;}
.btns a{z-index:-1;}

这会将 btns div 放到元素堆栈的底部，同时将链接提升到顶部。这样，理论上，如果您在链接的元素边界内单击，您将触发其单击事件，而单击 div 中的其他任何位置，您将触发其单击事件。请让我知道这是否有效。

【讨论】：