EVENTS - event.preventDefault()

The event.preventDefault() is used to prevent any default action from happening.

Let us simplify with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
   	
        <a href = "https://www.google.com"> Click to go to google </a>

      	<script>
      
			$( "a" ).click(function( event ) {
  				event.preventDefault();	
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there is an <a> element,

<a href = "https://www.google.com"> Click to go to google </a>

And when we click on the above link, we are taken to https://www.google.com.

Now, if we see the JQuery statement,

$( "a" ).click(function( event ) {
	event.preventDefault();
});

When we click on the <a> element, the JQuery statement gets triggered.

$( "a" ).click(...);

And the anonymous function inside the click() event,

function( event ) {
	event.preventDefault();
}

We have used the event.preventDefault() that prevents any default actions from happening.

As in this case, the default action to click on the <a> element, to reach the site https://www.google.com.

<a href = "https://www.google.com"> Click to go to google </a>

And the event.preventDefault() stops the above action.

❮❮ PREV NEXT ❯❯