单击 child 个元素会触发 parent 个单击事件

Question

我知道这个问题已经被问过几次了，但我似乎无法解决这个问题。单击 child 时，我不想触发 parent 事件。我有以下内容：

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

以及以下 jquery：

$(document).ready(function() {

            $('.tabItem').each(function(index){                             

                $(this).attr('id', 'tabIndex'+index);               
                var contentDiv = $(this).find('div').first();
                var position = contentDiv.position();
                var right = $(window).width() - position.left - contentDiv.width() ;
                var top = (position.top - 18) ;
                var contentId = 'tabContent' + index;           

                $(contentDiv).css( "display", "none" ).css({top: top, left: 200}).attr('id', contentId);                

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

                    $(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');

                });             
            });

  });

点击事件适用于 parent 和 class tabItem。但是当我单击 child div 时，parent 事件文件。这是一个工作示例 jsfiddle

Answer 1

您需要在 child 的事件处理程序上调用 event.stopPropagation()。这将防止事件冒泡到 parent 元素。

对此要非常小心，因为如果您不小心的话，您可以快速切断所有 click-events 从冒泡到 parent。这显然不是您想要的。

Answer 2

另一种可能的解决方案是将 click 事件绑定到 span:

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

演示：https://jsfiddle.net/lmgonzalves/asqwnr8v/3/

注意：您还需要在 click 事件中修复一些 $(this) 到 $(this).parent()。

Answer 3

只需将您的点击处理程序更改为：

        $(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();

        });

重要的变化是：

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

和

e.stopPropagation();

单击 child 个元素会触发 parent 个单击事件

Clicking child element fires parent click event

jquery

click