In JavaScript, the preventDefault method allows us to prevent the default action associated with an event.
The default action is the one defined in the browser when an event occurs on an element. For example:
- Submitting a form by clicking a
submitbutton - Navigating to a new page by clicking a link
In general, the default action is useful, and it really is what we want to do in most cases.
However, sometimes we need to prevent them from happening because we want to do something different (or a prior action, such as validation).
For this, we have the preventDefault method, which is available on the Event object. By invoking it, we can “stop” these default actions.
Avoid unnecessary use: If there is no specific reason to prevent the default action, it is better not to use preventDefault.
How does preventDefault work?
Let’s see how it works with a simple example. For instance, when we click on a link, the browser tries to navigate to a new URL.
If we use preventDefault on the click event, we prevent the browser from performing this navigation.
const link = document.querySelector('a');
link.addEventListener('click', (event) => {
event.preventDefault();
});In this case:
- Although the link points to an external page, clicking on it will not navigate to the specified URL.
- Instead, the message “The link has not been followed” will be printed in the console.
- This happens because we have used
event.preventDefault(), which prevents the default action of the link (navigation) from occurring.
Practical examples
Preventing form submission
One of the most common use cases for preventDefault is in forms. Sometimes, we need to validate the form data before sending it to the server.
If the user clicks the submit button, the default action is to submit the form, but we can prevent it until the data is validated.
<form id="myForm">
<input type="text" id="name" required>
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById("myForm");
form.addEventListener("submit", function (event) {
event.preventDefault(); // Prevents the form from being submitted
const name = document.getElementById("name").value;
if (!name) {
alert("Please enter your name.");
} else {
console.log("Form submitted successfully.");
}
});
</script>In this example, preventDefault allows us to control the form submission and perform a prior validation before allowing the data to be submitted.
:::::
Disabling navigation on links
As we saw in the initial example, if we want to prevent a link from navigating to a new page, we can use preventDefault.
This can be useful if we are building a single-page application (SPA) or if we want to handle the link in a custom way, such as opening a modal window or dynamically loading content.
<a href="https://www.example.com" id="myLink">Click to load content</a>
<script>
const link = document.getElementById("myLink");
link.addEventListener("click", function (event) {
event.preventDefault(); // Prevents navigation
alert("Link clicked, but does not redirect.");
});
</script>With this,
- We prevent the browser from loading the page that the link points to.
- Still, we can perform some action, such as displaying a message or dynamically loading content.
:::::
Handling keyboard events
Another common use of preventDefault is in keyboard-related events. In interactive applications, such as games or forms, we sometimes need to prevent certain keys from performing their default actions, such as the Backspace key that deletes characters in a text field.
<input type="text" id="textField" placeholder="Type something...">
<script>
const textField = document.getElementById("textField");
textField.addEventListener("keydown", function (event) {
if (event.key === "Backspace") {
event.preventDefault(); // Prevents text from being deleted
console.log("The Backspace key has been disabled.");
}
});
</script>In this case,
- We prevent the
Backspacekey from deleting the text in the input field. - Instead, we can handle the action in a custom way or block it completely.