Как отфильтровать дочерние элементы в обработчике событий?

Question

У меня есть кнопка для загрузки. Кроме того, обработчик событий на основе jQuery (использует делегирование событий), который устанавливает/отключает загрузочный активный класс на соответствующем .btn на основе события click.

Проблема возникает, когда у моих кнопок есть html-элементы внутри нее. Когда вы нажимаете на дочерний элемент кнопки, класс .active устанавливается на дочерние элементы .btn.

Как получать события только для точных элементов, которые меня интересуют?

http://jsfiddle.net/0nc3wjq4/ Чтобы воспроизвести проблему, нажмите на одно из номеров нажатием кнопки, а затем нажмите другой номер на другой кнопке.

<div class="btn-group btn-group-justified pipeline" role="group"> 
     <a href="#" class="btn btn-default" role="button"> 
     <h3 class="text-center">767</h3> 
     <p class="text-muted text-center">Stage1</p> 
     </a> 
    </div> 

Event Handler

$(".btn-group").on("click", ".btn", function(e) { 
    $(this).siblings(".active").removeClass('active'); // previous 
    $(e.target).addClass('active'); // current 
}); 

Answer 1

заменить $(e.target) с $(this)

e.target показывает как h3/p и не button

e.target является элементом, который вызвал событие, то есть - h3 вы нажали, который распространяется событие на a.btn. Это затем попало на ваш обработчик событий.

this - это элемент, который запускает обработчик.

Answer 2

jsFiddle Demo

Вы искали возвращения ложной. Это остановит распространение (отличное от предотвращения по умолчанию), а также предотвратит действие click click по умолчанию. Кроме того, вы можете воспользоваться цепью здесь, чтобы сделать это в двух строках.

$('.btn').on('click',function(){ 
    $(this).addClass('active').siblings(".active").removeClass('active'); 
    return false; 
});