In JavaScript, the preventDefault method allows us to prevent the default action associated with an event from being performed.
The default action is the one defined by the browser when an event occurs on an element. For example:
- Submitting a form when clicking a button of type
submit - Navigating to a new page when clicking a link
In general, the default action is useful, and it’s what we want to do in most cases.
But sometimes, we need to prevent them from happening because we want to do something else (or a prior action, like 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’s 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 attempts 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:
- Even though the link points to an external page, clicking on it will not navigate to the specified URL.
- Instead, the message “The link was not followed” will be printed to the console.
- This happens because we used
event.preventDefault(), which prevents the link’s default action (navigation) from taking place.
Practical Examples
Preventing Form Submission
One of the most common use cases for preventDefault is in forms. Sometimes, we need to validate 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 validation before allowing the data to be sent.
Disabling Navigation in 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 loading content dynamically.
<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 the link points to.
- We can still perform some action, like showing a message or loading content dynamically.
Handling Keyboard Events
Another common use of preventDefault is in keyboard-related events. In interactive applications, like games or forms, we sometimes need to prevent certain keys from performing their default actions, such as the backspace key (Backspace) which 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 text in the input field. - Instead of this, we can handle the action in a custom way or block it completely.
