jQuery - target.href <a href="#"><img></a>

Question

私は、HTML内のすべてのリンクを乗っ取ってpreventDefaultをハイジャックし、loadPage関数（）をロードするajaxメソッドを持っています。

このメソッドは、内部に<img>がない他のすべてのリンクで機能します。しかし<a>に<img>というメソッドがある場合は、clickEvent.target.hrefのメソッドが機能していないようです。

この場合、var urlはコンソールでは未定義を返しますが、他のリンクではhrefを返します。

私はこのインスタンスでターゲットメソッドを使用すると何か問題があると思いますか？

$('#container a').click(function(clickEvent){ 
     var url = clickEvent.target.href; 
     if(url.match(urlWebServer)) { 
        clickEvent.preventDefault(); 
        loadPage(url); 
     } 
}); 



<div id="user_img">   
    <a href="somepage.html"><img src="img_user/self.jpg" class="self" /></a> 
</div> 

Answer 1

はい、クリックしたターゲットであるため、clickEvent.targetは使用しないでください。あなたの場合、のターゲットはaではなく、であり、それにはが含まれています。

イベントが実際にバブルアップするので、画像をクリックすると、clickイベントが上部（最大でaまで）に伝播され、指定したイベントデリゲートがトリガーされます。

ソリューションは

var url = this.href; 

にその行を変更したり、あなたが得ることを好む場合はjQueryによる値は最初のものは速く

var url = $(this).attr('href'); 

で使用することです。

ハンドラ内のthisは、ハンドラをアタッチするDOM要素を参照するという解決策です。したがってthisはaを参照します。

Answer 2

targetは、あなたがそれを取り付けた要素の子のいずれかとすることができるイベントが上のトリガされたことを実際の要素です。

代わりにthisを使用してリンクを参照してください。

var url = $(this).prop("href"); 

Answer 3

jQueryを使用して選択してバインドする場合、残りの操作でjQueryを使用しないのはなぜですか？ clickEvent.targetは、クリックではなく、イベントリスナーを取り付けた先の要素を受け取った要素を指しているためだ

$('#container a').click(function(event){ 
    var url = $(this).attr('href'); 
    if(url.match(urlWebServer)) { 
       event.preventDefault(); 
       loadPage(url); 
    } 
}); 

Answer 4

。代わりに正しい要素に対応するthisを使用してください。

var url = this.href;

はまた、あなたが$(this).propか$(this).attrを行う必要がないことに注意してください。別のjQueryインスタンスを作成して別のメソッドを呼び出す必要なく、アンカー要素の.hrefプロパティに安全にアクセスできます。