jQuery event.preventDefault() Method

jQuery | event.preventDefault() Method: Learn about the jQuery event.preventDefault() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on November 01, 2022

event.preventDefault() Method

An event is an action occurred by the user. Therefore, many functions and methods can be set according to those actions performed. When these actions are defined for an event interface, we term those as the event properties. There are various predefined event properties in jQuery. Here, let's discuss the event.preventDefault() method.

The event.preventDefault() is a built-in method in jQuery. The prevent default, here, means that it will stop or prevent the default action for the selected element. The default action can be – clicking the URL that redirects to some other webpage or submitting a form by clicking the submit button, etc.

We can also check whether the event.preventDefault() method has been successfully implemented or not by using the event.isDefaultPrevented() method in jQuery.

event.preventDefault() Method Syntax

event.preventDefault();

This method does not accept any parameters. It returns the selected element after making the changes. Hence, prevents the default action from happening. The below example shows how this method stops the user to redirect to the applied URL.

jQuery event.preventDefault() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Event - Prevent Default</h2>
    <p></p>
    <hr/>
    <p>Welcome to Include Help</p>
    <p>For Visiting the Home Page : <a href="https://www.includehelp.com/">Click Here</a></p>
    <p>Thanks for visiting</p>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('a').click(function(){
            event.preventDefault();
            $('h3').html('Default Event Prevented');
        });
    });
  </script>
</html>

Output:

Example 1: jQuery event.preventDefault() Method

jQuery event.stopImmediatePropagation() Method

jQuery event.isDefaultPrevented() Method

Comments and Discussions!

Load comments ↻