Как сделать div clickable, используя внутренний href, но не переопределять другие внутренние hrefs

Question

У меня есть div с 3 внутренними hrefs. Мне нужно сделать div clickable и унаследовать один из внутренних 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> 

Итак ... любые идеи? :)

Answer 1

Попробуйте убить propagation of the event из ваших якорей

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

Answer 2

попробуйте установить z-индекс div на 999 и установить z-индекс ссылок в div на -1.

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

Это погрузит btns div в нижнюю часть элемента, одновременно поднимая ссылки на верх. Таким образом, теоретически, если вы щелкнете по границам элементов ссылки, вы вызовете его событие щелчка, нажав в другом месте в div, вы вызовете его событие click. Пожалуйста, дайте мне знать, работает ли это.