如何使用內部href使div可點擊但不覆蓋其他內部hrefs

Question

我有一個帶有3個內部hrefs的div。我需要使div可點擊並讓它繼承其中一個內部hrefs。不是一個問題......但是這會導致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> 

那麼......任何想法？ :)

Answer 1

嘗試從您的錨

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

Answer 2

嘗試將div的z-index設置爲999，並將div中鏈接的z-index設置爲-1。

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

這會將btns div沉到元素堆棧的底部，同時將鏈接提升到頂部。這樣，理論上，如果您在鏈接的元素邊界內單擊，您將觸發其單擊事件，同時單擊div中的任何其他位置，您將觸發其單擊事件。請讓我知道這是否有效。