JQuery clickable div with working mailto link inside

Question

I have a div that I want to click, but I need a mailto link inside this div to still work. When I hover over the mailto link, 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: [e-mail] "> [e-mail] </a></li> <li class="search_results_phone">[phone]</li> <li class="search_results_office">[phone]</li> </ul></div> 

And now 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 as follows:

 <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: [e-mail] "> [e-mail] </a></li> <li class="search_results_phone">[phone]</li> <li class="search_results_office">[phone]</li> </ul></div> 

And add the following jQuery code

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

This will prevent event bubbles from appearing before the parent div ant triggers a click of a button.

Answer 2

Consider this.

one of the elements jquery offers is a modal dialog.

Basically, it provides a “screen” dialog box that sits above the rest of the screen so that you don't click on anything else on the page during the dialog.

div ... which is an element of a container, can contain several elements ... any element inside a div is still considered part of the div.

Now I'm not a professional when it comes to the structure and hierarchy of the DOM, but it seems to me that what you are trying to do will not work.

if there is something like a link inside a div, and jquery looks at the click event of this element. I would suggest that anything inside the div would be “below” the screen provided by the div. so if you have a link inside a div and you click on the link, you also technically click on the div as well.