Stop browser default behaviour and propagation in the DOM

With the built in jQuery-functions stopPropagation() and preventDefault() you can avoid common bugs that happens thanks to default browser behaviour by passing a event parameter through the function and later call the functions on it like in the example.

$(document).ready(function() {
  $('.example').on('click', function(event) {
    event.stopPropagation(); // This will stop the DOM from bubbling up after the click
    event.preventDefault(); //This will stop the page to reload when clicked on link like <a href="#"></a>
   });
  $('.containerofexample').on('click', function() {
    alert('this alert will not pop up thanx to stopPropagation');
  });
});