jQuery Event isDefaultPrevented() Method

The jQuery event.isDefaultPrevented() method is used to check whether the event.preventDefault() method was called on this event object. It allows you to determine whether the default action of an event has been prevented using the preventDefault() method or not.

This method returns a boolean value "true" if the event.preventDefault() method was called; otherwise, it returns "false".

Syntax

Following is the syntax of the jQuery event.isDefaultPrevented() method −

event.isDefaultPrevented()

Parameters

This method does not accept any parameter.

Return Value

This method returns a 'true' value if the 'preventDefault()' method has been called; otherwise, it will return 'false'.

Example 1

The following program demonstrates the usage of the jQuery event.isDefaultPrevented() method −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click to check whether the preventDefault() method was called or not.</p>
    <button>Click to check</button>
    <script>
        $('button').click(function(event) {
            event.preventDefault();
            if(event.isDefaultPrevented){
                alert("Does the preventDefault() method was called? " + event.isDefaultPrevented());
            }
        });
    </script>
</body>
</html>

Output

The above program displayed a button, when the button clicked a pop-up alert appeared and returned 'true' −

Example 2

If the preventDefault() method is not used in the event object, it will return 'false' −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click to check whether the preventDefault() method was called or not.</p>
    <button>Click to check</button><br><br>
    <span></span>
    <script>
        $('button').click(function(event) {
            if(event.isDefaultPrevented){
                $('span').text("Does the preventDefault() method was called? " + event.isDefaultPrevented());
                $('span').css("color", "green");
            }
        });
    </script>
</body>
</html>

Output

After executing the program, a button will appear. When the button is clicked, it will display "false" as −

When user clicks the button −

Example 3

Preventing the link from redirecting.

In the example below, first, we will check if the preventDefault() method has not been used to prevent the link. If it hasn’t been used, we will call this method when the user clicks on the button to prevent the link from redirection −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below link to redirect to another page</p>
    <a href="https://www.tutorialspoint.com/index.htm">Tutorialspoint</a>
    <br><span></span>
    <p>Click on the below button to prevent redirection</p>
    <button>Prevent the above link from redirect</button>
    <script>
        $('button').click(function(event){
          if(event.isDefaultPrevented){
            event.preventDefault();
            $('a').removeAttr('href');
          }
        });
    </script>
</body>
</html>

Output

The above program displays a link and a button, when the user clicks on the link will redirect to another page, whereas clicking the button will prevent the link from redirecting −

jquery_ref_events.htm

Print Page