jQuery event.PreventDefault

The preventDefault() method tells the browser that if there is a default behaviour for this event on this object, then skip that default behaviour. This is not a jQuery feature , but it is part of the Event object passed to Javascript event listeners . When you bind an event listener to a DOM (Document Object Model) element the Event object is passed as an argument. That listener is executed when that event is triggered, but each event has a default implementation . When you call event.preventDefault is flags the event object as handled, and the default implementation is skipped. 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.

$( "a" ).click(function( event ) { event.preventDefault(); $( "<p>" ) .append( "default " + event.type + " prevented here.." ) .appendTo( "p" ); });

<a href="https://net-informations.com">Go to website</a>

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.

Browser View

Go to website

Full Source

<!DOCTYPE html> <html lang="en"> <head> <title>jQuery preventDefault() method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $( "a" ).click(function( event ) { event.preventDefault(); $( "<p>" ) .append( "default " + event.type + " prevented here.." ) .appendTo( "p" ); }); }); </script> </head> <body> <a href="https://net-informations.com">Go to website</a> <p></p> </body> </htm>

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.

Next : Difference between event.PreventDefault and event.stopPropagation?

Related Topics