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

现在让我们来谈一谈jQuery

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

- Rich C

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

并添加以下jQuery代码

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

这将防止事件冒泡到父div并在那里触发点击。

- Olegas

Answer 2

考虑一下。

jQuery 提供的其中一个项目是模态对话框。

基本上，它提供了一个带有“屏幕”的对话框，该屏幕位于页面的其余部分上方，以防止您在对话框弹出时单击页面上的其他任何内容。

div 作为容器元素可以容纳多个项目。在 div 中的任何项目仍被视为 div 的一部分。

现在，当涉及到 DOM 结构和层次结构时，我并不是专家，但听起来你试图做的事情不会起作用。

如果 div 内部有类似链接的东西，并且 jQuery 正在查看该元素的单击事件。我会认为 div 内部的任何内容都会在 div 提供的屏幕“下面”。因此，如果您在 div 中放置链接并单击链接，则也会技术上单击 div。

- Patrick