jQuery clickable div with working with mailto link

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アリまでのイベントのバブリングを防止します

<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(); 
}); 

を追加します。このようなリンクをそこをクリックしてください。

Answer 2

はこのことを考えてみましょう。

jqueryが提供するアイテムの1つがモーダルダイアログです。

基本的には、ダイアログボックスが表示されている間にページ上の他のものをクリックしないように、画面の残りの部分にある「画面」がダイアログボックスに表示されます。

div ...コンテナ要素は複数のアイテムを保持できます... div内にあるアイテムは引き続きdivの一部とみなされます。

私はDOM構造と階層についてはプロではありませんが、あなたのやろうとしていることがうまくいかないように聞こえます。

div内にリンクのようなものがある場合、jqueryはその要素のclickイベントを見ています。私は、div内の何かがdivの画面の下にあると仮定します。だから、もしdivの中にリンクがあり、そのリンクをクリックすれば、divも同様に技術的にクリックします。