jQuery 可点击 div，内部有有效的 mailto 链接

Question

我有一个 div，我希望它可以点击，但我需要该 div 内有一个 mailto 链接才能仍然工作。当我将鼠标悬停在 mailto 链接上时，mailto 会显示在浏览器底部，但单击会激活附加到 div 的链接。无论如何？谢谢。

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

现在是 jQuery

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

Answer 1

向您的 mailto: 链接添加一个类，如下所示:

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

并添加以下 jQuery 代码

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

这将防止事件冒泡，直至父 div 触发点击。