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

Question

У меня есть метод ajax, который захватывает каждую ссылку в HTML и preventDefault, а затем загружает функцию loadPage().

Метод работает со всеми другими ссылками, в которых нет <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, но является img содержит.

События фактически пузырятся, поэтому вы нажимаете изображение, и событие 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 для остальной части вашего действия?

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

Answer 4

Это потому, что clickEvent.target относится к элементу, который получил щелчок, а не элемент, к которому был прикреплен слушатель событий. Вместо этого используйте this, что соответствует правильному элементу.

var url = this.href;

отметить также, что вам не нужно делать $(this).prop или $(this).attr; вы можете безопасно получить доступ к свойству .href элемента привязки без необходимости создания другого экземпляра jQuery и вызова другого метода.