How to stop and prevent event propagation in jQuery?

To stop and prevent event propagation in jQuery, you can use the stopPropagation() method and return false statement.

Here's an example of how to use them:

stopPropagation() method:

$('.element').on('click', function(event) {
  event.stopPropagation();
  // rest of your code
});

In this example, when the element with the class .element is clicked, the event propagation is stopped, preventing the event from bubbling up to its parent elements.

return false statement:

$('.element').on('click', function() {
  // rest of your code
  return false;
});

In this example, when the element with the class .element is clicked, the return false statement will both stop the event propagation and prevent the default action of the event (e.g., navigating to a URL if the element is an anchor tag).

By using either of these methods, you can effectively control the event propagation and prevent it from propagating further up the DOM tree.