Question

我有bootstrap按钮组。此外，基于jQuery的事件处理程序（使用事件委托）根据click事件在相应的.btn上设置/取消设置bootstrap .active类。

当我的按钮里面有html元素时，就会出现问题。当您单击按钮的子元素时，。活动类将在.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

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

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

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

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

Answer 2

<强> jsFiddle Demo

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

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

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

2 个答案: