$（e.target）は要素内をクリックしてもリンクに等しい？

Question

私はこの経験はもっとあるはずですが、私は解決できないようです。リンクやその中の何かをクリックすると、私はこれを$(e.target)にして親やその他のものを呼びたいと思っています。

スクリプトの内訳は次のようになります。もちろん、この

$(document).on('mousedown', function(e) { 
    if ($(e.target).is('ul.SiteNav>li>a')) { 
    alert('Hello World!') 
    } 
}); 

がちょうどスニペットですが、それにもかかわらず、私は私の検索にもかかわらず、$(e.target)使用に新たなんだ、私はあなたがまだクリックしているので、あなたが<a></a>内<i></i>をクリックできない理由と解決できませんリンクは、あなた/ ...ここ

は

Answer 1

targetが最も深いレベルの要素は、あなたが実際に相互作用が、どのような可能性があなたを混乱さすると、そのイベントのバブルアップしているものは何でもなります私の問題のJSFiddle例ですされていませんドンツリーのでイベントハンdlerはまだ親にバブルとは、あなたが

if ($(e.target).closest('.SiteNav a').length){ 
    // code if <a> expected 
}else{ 
    // do something else when not <a> 
} 

closest()も実際のターゲットが含まれてやりたいと、それはだ動作するようにイベントハンドラ

使用closest()にトリガする子をクリックし、<a>クリックを聞いていました始点から上に向かって

Answer 2

これをクリックすると、実際にイベントが表示されます。クリックした要素はe.targetのみです。それは理にかなっています。ハンドラはドキュメント上にあり、要素はiです。なぜリンクがクリックするのですか？

closest()を使用して親チェーン内で見つけることができます。要素自体またはその親の1つが指定されたセレクタに一致すると、結果が返されます。

$(document).on('mousedown', function(e) { 
 
    if ($(e.target).closest('ul.SiteNav>li>a').length > 0) { 
 
    alert('Hello World!') 
 
    } 
 
});

.SiteNav { 
 
    List-style:none; 
 
} 
 
a { 
 
\t float:left; 
 
\t height:42px; 
 
\t line-height:42px; 
 
\t padding:0 10px; 
 
\t color: #f7dd71; 
 
\t text-decoration: none; 
 
\t font-size: 14px; 
 
\t font-family: "Comic Sans MS", cursive, sans-serif; 
 
\t font-weight: bold; 
 
} 
 
a:nth-of-type(1) { padding-right:2px; } 
 
a:nth-of-type(2) { padding:0 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="SiteNav"> 
 
    <li><a href="javascript:;" data-link="Reply">Reply</a></li> 
 
    <li><a href="javascript:;" data-link="Reply"><i class="fa fa-angle-down"></i></a></li> 
 
</ul>