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

我有引导按钮组。此外，基于jQuery的事件处理程序（使用事件委托），基于click事件在相应的.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 
});

来源

2015-10-09 smartnut007

与$(this)

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

e.target是触发事件，即元素替换$(e.target) - 在h3你点击它传播的事件到a.btn。然后被你的事件处理程序抓住了。

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

来源

2015-10-09 23:24:29 BenG

非常感谢。如果您还可以指出文档或解释$（this）和e.target @ bg101 – smartnut007

之间的区别，那么这将会很棒。它位于[jQuery.on]（http://api.jquery.com/on/）文档中： _注意，如果事件已从后代元素冒泡，则this可能不等于event.target。 – Barmar

jsFiddle Demo

您正在寻找返回FALSE。这将停止传播（这与防止默认设置不同），并阻止默认的点击操作。另外，你可以利用这里的链接来分两行来做这件事。

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

来源

2015-10-09 23:24:08

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

回答

相关问题