Updated April 11, 2023
Introduction to jQuery preventDefault()
preventDefault() method in jQuery is basically used to stop or cancel the default action of an element from occurring. This method works in a way to cancel the cancelable event which means any default action belonging to that event will not occur. This method does not accept any arguments. One can also check whether the preventDefault() method was ever called on the selected element or not by using the method isDefaultPrevented(). The preventDefault() method does not stop the event from propagating further through the DOM unless one of its event listeners invokes stopPropagation() or stopImmediatePropgation(). All events are not cancelable. One can use the cancelable property to check if an event is cancelable.
The following are the examples where the preventDefault() method can be applied.
- Preventing a Submit button from submitting a form
- Preventing a link from opening the URL, thereby, stopping the browser to go to another page.
Syntax
event.preventDefault()Note: This method does not accept any parameters.
Examples of jQuery preventDefault
Here are the examples mentioned:
Example #1
The following example illustrates how the preventDefault() method can be used to prevent the opening of a link by canceling the click event.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery event.preventDefault() Method
</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
width: 350px;
height: 150px;
margin-left: 100px;
}
</style>
<script>
$(document).ready(function() {
$("a").click(function(event) {
event.preventDefault();
alert("The requested page is not available");
});
});
</script>
</head>
<body>
<div id="divstyle">
<a href="https://www.google.com">
<h3>Welcome to jQuery Tutorial</h3>
</a>
<hr />
<b>jQuery preventDefault() method</b>
<p>Prevents the opening of the URL above when clicked upon.</p>
</div>
</body>
</html>Output
- The below screenshot shows the page which gets displayed once the above code is executed.
- On clicking the link, the URL does not open showing an alert message. This is because the default action of the click is canceled.
Example #2
The following example illustrates how the preventDefault() method can be used to prevent the submission of a form.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
padding-top: 40px;
width: 350px;
height: 150px;
margin-left: 100px;
}
input {
width: 220px;
height: 30px;
border-radius: 10px;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function(event) {
event.preventDefault();
alert("Sorry! Can not submit the form");
});
});
</script>
</head>
<body>
<div id="divstyle">
<input type="text" placeholder="Enter Input" />
<br /><br /><br />
<button>Submit</button>
</div>
</body>
</html>Output
- Below screenshot is taken when the code above gets executed.
- On clicking the submit button, the form is not submitted displaying an alert message. This is because preventDefault() method cancels the default action of the submit event.
Example #3
Following example is an another similar illustration of how the preventDefault() method can stop a default action of click to occur.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery event.preventDefault() Method
</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
padding-top: 10px;
width: 350px;
height: 150px;
margin-left: 100px;
}
</style>
<script>
$(document).ready(function() {
$("a").click(function(event) {
event.preventDefault();
$("<div>")
.append("default " + event.type + " prevented")
.appendTo("#link");
});
});
</script>
</head>
<body>
<div id="divstyle">
<a href="https://www.google.com">Default action of the click event is cancelled.</a>
<div id="link"></div>
<hr />
<b>jQuery preventDefault() method</b>
<p>Prevents the opening of the URL above when clicked upon.</p>
</div>
</body>
</html>Output
- Below screenshot is taken when the above code gets executed.
- On clicking the link, the default action of click event gets cancelled due to preventDefault()
- Here clicked anchor tags will not redirect the browser to the new URL, instead it will do the rest of the work and append data to the div tag.
- To stop the event from propagating the DOM, event.stopPropagation() method can be used.
Example #4
Following example is an another similar illustration of how the preventDefault() method can stop a default action of click to occur.
Code:
<!DOCTYPE html>
<html>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
padding-top: 10px;
width: 350px;
height: 150px;
margin-left: 100px;
}
</style>
<body>
<div id="divstyle">
<h3>Please check this box.</h3>
<form>
<label for="checkbox_id">Checkbox:</label>
<input type="checkbox" id="checkbox_id" />
</form>
<br />
<div id="outputbox_id"></div>
<script>
document.querySelector("#checkbox_id").addEventListener(
"click",
function(event) {
document.getElementById("outputbox_id").innerHTML +=
"Sorry! You can not check this box.<br>";
event.preventDefault();
},
false
);
</script>
</div>
</body>
</html>Output
- Below screenshot is taken when the code above gets executed.
- On trying to click the checkbox, we see that checkbox is not checked while displaying a message as shown below.
- Default action of clicking a checkbox is the toggling of it which gets prevented due to the preventDefault() method
Conclusion
- In this article, we learnt about an jQuery event method, preventDefault() which is used to prevent or stop any default action of an element to occur by cancelling the event.
- The preventDefault()method basically tells the browser that in case, there is a default behavior for a particular event on a particular object, then skip that default behavior.
- The method returns the selected element with the applied change.
- preventDefault() method can cancel the event at any stage of event flow, thus, stopping any default action from occurring.
- cancelable can be used to determine if the event is cancelable, given the fact that all the events are not cancelable.
Recommended Articles
This is a guide to jQuery preventDefault. Here we discuss the introduction to jQuery preventDefault() along with respective examples. You may also have a look at the following articles to learn more –
