Jquery 单击子元素将触发父单击事件

我知道这个问题已经被问过好几次了，但我似乎无法让它起作用。当子事件被单击时，我不希望父事件触发。我有以下资料：

<div class="tabItem">
    <span> Item 1</span>
    <div class='contentBody'>Item 2 Body</div>
</div> 

单击事件适用于类为

tabItem

的父级。但是，当我单击子div时，父事件文件。下面是一个工作示例

您需要调用孩子的事件处理程序。这将防止事件冒泡到父元素

---

对此要非常小心，因为如果不小心的话，您可以快速将所有点击事件从冒泡到父对象。这显然不是您想要的。

另一种可能的解决方案是将

单击事件绑定到
span
：

$(this).find('span').on('click', function(e) {

演示：

注意：您还需要将一些
$（this）
修复为
$（this）.parent（）
内的
单击事件。
只需将单击处理程序更改为：

        $(this).on('click',  function(e) {               

            $(this).removeClass('tabItem').addClass('tabItemSelected');                                         

             $(currentTab).removeClass('tabItemSelected').addClass('tabItem');  

            if($('#' + currentContentBody).is(":visible")){
                $('#' + currentContentBody).toggle( "slide" ); // close the last tab
            }
            if($(contentDiv).is(":hidden")){
                $(contentDiv).toggle( "slide" );    

            }           
             currentTab = $(this);
             currentContentBody = $(contentDiv).attr('id');

            e.stopPropagation();

        });

其中重要的变化是：

$（此）.on（'click'，函数（e）{

及

e、 停止传播（）

通读答案你总是在点击一个子元素，因为文本在span内。函数应该附加到span元素，而不是整个容器：
$（this）。查找（'span'）。在（'click'）上，函数（e）{
。准确地说。这可以防止子元素点击传播/冒泡到父类。
        $(this).on('click',  function(e) {               

            $(this).removeClass('tabItem').addClass('tabItemSelected');                                         

             $(currentTab).removeClass('tabItemSelected').addClass('tabItem');  

            if($('#' + currentContentBody).is(":visible")){
                $('#' + currentContentBody).toggle( "slide" ); // close the last tab
            }
            if($(contentDiv).is(":hidden")){
                $(contentDiv).toggle( "slide" );    

            }           
             currentTab = $(this);
             currentContentBody = $(contentDiv).attr('id');

            e.stopPropagation();

        });