Span внутри якоря с пузырьками событий

Question

У меня есть такой кусок HTML:

<li class="addToFriends"><a href="....">Something something<span>INSIDE SPAN</span>something</a></li>

Для обработки AJAX-запроса при нажатии на якорь я зарегистрировал обработчик события click:

    $('.addToFriends a').click(function(event){
    var target = $(event.target);
    if (target.is('a')) {
              // if I click on SPAN element following fragment won't execute!


      // do ajax request
    }       
    event.preventDefault();
});

Мои вопросы:

• почему событие click вызывается для элемента span? В конце концов, я не связывал событие click с элементами SPAN
• Помимо предыдущего вопроса, я подумал, что если я не буду обрабатывать событие нажатия SPAN, браузер будет использовать всплывающее событие для вызова события щелчка для привязки (если я не буду вызывать event.stopPropagation ()). Но у меня тоже не получилось, так как событие щелчка вызывается только один раз

Итак, я решил эту проблему, и мое решение:

    $('.addToFriends a').click(function(event){
    var target = $(event.target);
    if (!target.is('a')) {
      target = target.parent('a')
    } 
            ...
});

Но все же, мне любопытно, почему это так работает ...

Спасибо

1022 * Paweł *

Answer 1

Вы должны использовать currentTarget вашего мероприятия.

$('.addToFriends a').click(function(event){
     event.currentTarget;    
     ...
});

Answer 2

Вы всегда можете прочитать спецификацию . Хороший учебник также доступен здесь .

StopPropagation имеет смысл, только если вы определили обработчики событий щелчка для элементов SPAN и A. Вызов stopPropagation в обработчике событий SPAN предотвратит вызов обработчика A. Это предполагает фазу пузырька по умолчанию.

Answer 3

Хорошо, но если я нажму на SPAN и вызову метод stopPropagation (), мой код в этой форме не будет работать:

$('.addToFriends a').click(function(event){
    var target = $(event.target);
    if (target.is('a')) {
       // do ajax request
       event.stopPropagation();               
       event.preventDefault();
    }

});

Тем не менее, мне кажется, я упускаю некоторые важные моменты, связанные с пузырями событий.