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

Question

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

Метод работает на всех других ссылках, которые не имеют <img> внутри. Но когда <a> имеет <img> внутри метода, clickEvent.target.href, похоже, не работает.

var url в этом случае возвращает undefined в консоли, но по любым другим ссылкам возвращает href.

Я полагаю, что-то не так, я использую метод target в этом случае?

$('#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

Если вы используете jQuery для выбора и связывания, почему бы не использовать jQuery для остальной части вашего действия?

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

Answer 3

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

var url = this.href;

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

Answer 4

target - это фактический элемент, на котором было инициировано событие, которым может быть любой из дочерних элементов элемента, к которому вы его прикрепили.

Используйте this для ссылки на ссылку.

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