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

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

本文关键字：程序 事件 元素 事件处理 何过滤 过滤      更新时间：2023-09-26

我有bootstrap button-group。此外，一个基于jQuery的事件处理程序(使用事件委托)可以根据click event在适当的.btn上设置/取消bootstrap .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
});

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

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

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

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

jsFiddle Demo

您正在寻找返回false。这将阻止传播(这与防止默认不同)，并防止默认的单击操作。此外，您可以利用这里的链接在两行中完成此操作。

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