stopPropagation dilemma?

Question

First, example js code:

$(function(){
   
    $('body').click(function(){alert('body clicked');});
    
    $('body').on('click','.post-header',function(e){
        
        e.stopPropagation();
        $(this).next('.post-content').slideToggle();
    
    
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body> 

        <div class="post-wrapper">
            <h2 class="post-header">Lorem Ipsum</h2>
            <div class="post-content">
                <p>Lorem Ipsum is simply dummy text of....</p>
            </div>
        </div>
      
    </body>

My question is, if e.stopPropogation() kills the bubbling towards body, how come the click event hits the body and triggers handler to run the slide code?

score 0 · Accepted Answer · edited May 23 '17 at 12:23

0

Referring to this answer to a previous similar question, it turns out that it is 'generally' useless using stopPropagation with delegated even handling. The event propagates already up to body before stopPropagation is activited.

But on the example above stopPropagation actually works to prevent the other click event handler attached to the body.

edited May 23 '17 at 12:23

Community

1
1

answered Feb 12 '16 at 15:28

ilcognito

37
7

stopPropagation dilemma?

1 Answers1