Friday 15 June 2018

javascript - What's the difference between event.stopPropagation and event.preventDefault?



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 =))


Answer



stopPropagation stops the event from bubbling up the event chain.



preventDefault prevents the default action the browser makes on that event.




Examples



preventDefault





$("#but").click(function (event) {
event.preventDefault()
})

$("#foo").click(function () {
alert("parent click event fired!")
})










stopPropagation





$("#but").click(function (event) {
event.stopPropagation()
})
$("#foo").click(function () {
alert("parent click event fired!")

})









With stopPropagation, only the button's click handler is called while the div'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:





For IE9 and FF you can just use preventDefault & stopPropagation.



To support IE8 and lower replace stopPropagation with cancelBubble and replace preventDefault with returnValue



No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...