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

【问题标题】：How to filter out child element events in a event handler?如何在事件处理程序中过滤掉子元素事件？
【发布时间】：2015-10-09 23:18:57
【问题描述】：

我有引导按钮组。此外，一个基于 jQuery 的事件处理程序（使用事件委托）根据点击事件在适当的 .btn 上设置/取消设置引导 .active 类。

当我的按钮中包含 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>

事件处理程序

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

【问题讨论】：

标签： javascript jquery jquery-events event-delegation

【解决方案1】：

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

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

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

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

【讨论】：

非常感谢。如果您还可以指出文档或解释 $(this) 和 e.target @bg101 之间的区别，那就太好了
它在 jQuery.on 文档中：请注意，如果事件从后代元素冒泡，this 可能不等于 event.target。

【解决方案2】：

jsFiddle Demo

您正在寻找返回 false。这将停止传播（这与阻止默认值不同），并且还会阻止默认点击操作。此外，您可以利用此处的链接来分两行执行此操作。

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

【讨论】：