jQuery clickable div with working mailto link inside

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 ho开发者_运维百科ver 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:test@test.org">test@test.com</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;
});

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:test@test.org">test@test.com</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.

Consider this.

one of the items that jquery offers is the modal dialog.

Basically it provides a dialog box with a "screen" that sits over the rest of the screen to keep you from clicking on anything else on the page while the dialog is up.

the div... being a container element can hold multiple items... any item that is inside the div is still considered a part of the div.

Now I'm not a pro when it comes to DOM structure and hierarchy, but it sounds to me like what your trying to do will not work.

if there is something like a link inside of a div, and jquery is looking at the click event of that element. I would assume that anything inside the div would be "under" the screen provided by the div. so if you have a link inside a div and you click the link, your also technichally clicking on the div as well.