Example of stopPropagation

In this example below you will see how to do a Example of stopPropagation with some HTML / CSS and Javascript

In this example, I show you how to use the idea to hide a element when clicked anywhere on the page

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • CSS
  • JavaScript
    <button class="show-el">Show element</button>
<div class="el">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed optio voluptas qui deleniti labore pariatur molestiae quod nisi. Modi recusandae incidunt enim at perferendis accusamus sunt fugit ducimus? Corrupti obcaecati blanditiis amet laboriosam corporis accusantium ea reprehenderit vitae! Consequuntur reiciendis itaque esse dignissimos laborum labore pariatur modi dicta ut et expedita aliquam aperiam nesciunt voluptas minus id atque? Iste dolores libero error illo culpa! Quos alias libero repellendus magnam veniam a velit maxime accusantium cum provident suscipit earum tempore vel odit aliquam ipsa incidunt nam fugiat perspiciatis quibusdam eligendi in officiis ipsam doloribus non quae et praesentium reiciendis facilis consectetur.</div>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/example-of-stoppropagation-bCqzd */
    .el {
  display: none;
}


/*Downloaded from https://www.codeseek.co/oieduardorabelo/example-of-stoppropagation-bCqzd */
    $('.show-el').on('click', function(ev){
  ev.stopPropagation();
  ev.preventDefault();
  
  $('.el').show();
});

$(document).on('click', function(){
  $('.el').hide();
});

$('.el').on('click', function(ev){
  ev.stopPropagation();
});

Comments