Pros and Cons of using e.stopPropagation() to prevent event bubbling

Question

Many people have explained that e.stopPropagation() prevents event bubbling. However, I\'m having a hard time finding why one would want or want to

Answer 1

Imagine you have a button and want to handle a click event:

    
    Text

Without event propagation, clicking on the image or the text wouldn't trigger the click event handler bound to the button, as the event would never leave the or the elements.

---

A case where you don't want event propagation is where nested elements have their own event handlers. Here's one example:

    
    Text
    ↓

If you don't stop the event propagation with .arrow's event handler, it will trigger the button's event handler as well.