For example, if you set up a click handler for a link and you call e.preventDefault() in that click handler, then the browser will not process the click on the link and will not follow the href in the link.
It's most noticeable with < a > tags when the click event, because you might want to prevent the link from being followed. But, it also works on things like keyboard input , touch, and so on.
If the hyperlink above is clicked then the browser will not try to redirect the browser (because of the preventDefault() call), but rather it will instead do the rest of the processing and append data to the div instead.
event.preventDefault() Vs. event.stopPropagation()
- event.preventDefault() – It stops the browsers default behaviour.
- event.stopPropagation() – It prevents the event from propagating (or bubbling up) the DOM.