내부 href를 사용하여 div를 클릭 할 수 있지만 다른 내부 hrefs를 덮어 쓰는 방법

Question

div가 3 내부 href가 있습니다. 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- 색인을 999로 설정하고 div의 링크의 z- 색인을 -1로 설정해보십시오.

이렇게하면 btns div를 요소 스택 맨 아래로 싱크하면서 맨 위 링크를 올립니다. 이렇게하면 이론적으로 링크의 요소 경계를 클릭하면 click 이벤트가 트리거되고 div의 다른 곳을 클릭하면 click 이벤트가 트리거됩니다. 이 방법이 효과가 있는지 알려주세요.