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触发点击那里。

Answer 2

考虑一下。

jquery提供的项目之一是模态对话框。

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

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

现在，当涉及到DOM结构和层次结构时，我不是专业人士，但对我来说听起来像你想要做的事情是行不通的。

如果div中有类似链接的东西，jquery正在查看该元素的click事件。我会假设div中的任何内容都会在div提供的屏幕下“。因此，如果您在div中有链接并且单击该链接，那么您也可以技术性地单击该div。

jQuery可点击div与内部工作mailto链接

2 个答案: