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

我有一個ajax方法劫持HTML和preventDefault中的每個鏈接，然後加載loadPage函數（）。jQuery - target.href與<a href="#"><img></a>

該方法適用於所有其他內部沒有<img>的鏈接。但是當<a>在方法clickEvent.target.href內部有<img>似乎不起作用。

此例中的var url在控制檯中返回undefined，但在任何其他鏈接上返回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>

來源

2011-12-16 Joakim Engstrom

是的，你不應該使用clickEvent.target，因爲是被點擊的目標。在你的情況下，目標不是a，而是img它包含。

事件實際上已經冒泡，因此您單擊圖像並將click事件傳播到頂部（直到a）並觸發您提供的事件代理。

的解決方案是該行更改爲

var url = this.href;

或者如果你喜歡打通jQuery的值，用

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

第一個是速度更快。

解決方法是，處理程序中的this引用您附加處理程序的DOM元素。所以this將參考a。

來源

2011-12-16 14:11:01

的target是實際的元素事件被觸發時，它可以是任何你連接它的元素的孩子。

使用this來引用鏈接。

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

來源

2011-12-16 14:01:24

據我所知，它是.attr（），不是.prop（），因爲它是一個HTML屬性而不是DOM屬性。 – daan 2011-12-16 14:05:18

如果您使用jQuery進行選擇和綁定，爲什麼不使用jQuery來執行其餘的操作？

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

來源

2011-12-16 14:02:15 daan

這是因爲clickEvent.target指收到的點擊，而不是該事件監聽器連接的元素的元素。改爲使用this，這對應於正確的元素。

var url = this.href;

另外請注意，你不需要做$(this).prop或$(this).attr;您可以安全地訪問anchor元素的.href屬性，而無需創建另一個jQuery實例並調用另一個方法。

來源

2011-12-16 14:02:18 Graham

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

回答

相關問題