How to make div clickable using internal href but not overide other internal hrefs

Question

I have a div with 3 internal hrefs. I need to make the div clickable and have it inherit one of the internal hrefs. Not a problem... however this then causes the JS to overide the other links inside the div, the ones I'm not inheriting for the parent div. Here's my code:

<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>

So... any ideas? :)

Answer 1

try setting z-index of the div to 999, and setting z-index of links in the div to -1.

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

This will sink btns div to the bottom of element stack, while raising links to the top. This way, in theory, if you click within element boundaries of a link, you will trigger its click event, while clicking anywhere else in the div, you will trigger its click event. Please let me know whether this works.

Answer 2

Try to kill propagation of the event from your anchors

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