jQuery clickable div with working mailto link inside

Question

I have a div that I want to be clickable but I need a mailto link inside that div to still work too. When I hover over the mailto link the mailto appears at the bottom of the browser but clicking activates the link attached to the div. Anyway around this? Thanks.

<div class="directory_search_results">
<img src="images/no_photo.png" />   
<ul class="staff_details">
<li class="search_results_name"><a href="http://www.netflix.com">Micheal Staff</a></li>
<li class="search_results_location">University of Illinois</li>
<li class="search_results_email"><a href="mailto:[email protected]">[email protected]</a></li>
    <li class="search_results_phone">(407) 555-1212</li>
    <li class="search_results_office">(407) 555-1212</li>
</ul></div>

And now the jQuery

$(document).ready(function(){       
$(".directory_search_results").click(function(){
         window.location=$(this).find("a:first-child").attr("href");
         return false;
});

Answer 1

Add a class to your mailto: link like this:

<div class="directory_search_results">
<img src="images/no_photo.png" />   
<ul class="staff_details">
<li class="search_results_name"><a href="http://www.netflix.com">Micheal Staff</a></li>
<li class="search_results_location">University of Illinois</li>
<li class="search_results_email"><a class="nobubble" href="mailto:[email protected]">[email protected]</a></li>
    <li class="search_results_phone">(407) 555-1212</li>
    <li class="search_results_office">(407) 555-1212</li>
</ul></div>

And add following jQuery code

$('.nobubble').click(function(event){
    event.stopImmediatePropagation();
});

This will prevent bubbling of the event up to the parent div ant triggering of a click there.