They seem to be doing the same thing…
Is one modern and one old? Or are they supported by different browsers?
When I handle events myself (without framework) I just always check for both and execute both if present. (I also return false
, but I have the feeling that doesn't work with events attached with node.addEventListener
).
So why both? Should I keep checking for both? Or is there actually a difference?
(I know, a lot of questions, but they're all sort of the same =))
Best Answer
stopPropagation
prevents further propagation of the current event in the capturing and bubbling phases.preventDefault
prevents the default action the browser makes on that event.Examples
preventDefault
stopPropagation
With
stopPropagation
, only thebutton
's click handler is called while thediv
's click handler never fires.Where as if you use
preventDefault
, only the browser's default action is stopped but the div's click handler still fires.Below are some docs on the DOM event properties and methods from MDN:
event.cancelBubble
event.preventDefault()
event.returnValue
event.stopPropagation()
For IE9 and FF you can just use preventDefault & stopPropagation.
To support IE8 and lower replace
stopPropagation
withcancelBubble
and replacepreventDefault
withreturnValue