如何在事件处理程序中过滤掉子元素事件？

Question

我有 bootstrap 个按钮组。此外，一个基于 jQuery 的事件处理程序（使用事件委托）sets/unsets bootstrap .active class 在适当的 .btn 上基于点击事件。

当我的按钮中有 html 个元素时，就会出现问题。当您单击按钮的子元素时，.active class 设置在 .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>

事件处理程序

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

Answer 1

jsFiddle Demo

您正在寻找 return 错误。这将停止传播（不同于阻止默认），并且还会阻止默认的点击操作。此外，您可以利用此处的链接在两行中执行此操作。

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

Answer 2

将$(e.target)替换为$(this)

e.target 显示为 h3/p 而不是 button

e.target 是触发事件的元素，即您单击的 h3 将事件传播到 a.btn。然后被您的事件处理程序捕获。

this 是触发处理程序的元素。

如何在事件处理程序中过滤掉子元素事件？

How to filter out child element events in a event handler?

javascript

jquery

jquery-events

event-delegation