Prevent default behaviour using event.preventDefault() in JavaScript
Using the event.preventDefault() method in JavaScript
The event.preventDefault() method allows you to prevent the default behaviour from occurring on an event i.e., it cancels the event if the method is cancellable. So, the behaviour actually varies depending on the type of element involved and also the context of the event. For example, when a link is involved, the behaviour by default is to navigate to the URL, but, using event.preventDefault() we are able to stop the web browser from redirecting to the web page. So, lets see how this thing actually works.
For example - Let's create a new anchor link tag in the body of the page. Let's link it to https://debugpointer.com, so, the expected behaviour is to go to the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>event.preventDefault</title>
</head>
<body>
<a href="https://debugpointer.com">Visit Homepage</a>
</body>
</html>
Let's now try to use the event.preventDefault() on the mouse click event. Let's get a refence to the anchor tag. So, let's now add an event listener to the anchor tag. Let's create a on-click event listener. Here, the first argument is the'click' event, the 2nd parameter is a callback function, with a parameter 'e' referring to the event object. The event object 'e' has a method called preventDefault() which prevents the default action on the event. Now, refresh the browser and click on the link, it won't navigate. This is because of the preventDefault() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>event.preventDefault</title>
</head>
<body>
<a href="https://debugpointer.com" id="dbgptrLink">Visit Homepage</a>
<script>
const dbgElement = document.getElementById("dbgptrLink");
dbgElement.addEventListener("click", (e) => e.preventDefault());
</script>
</body>
</html>
You can use this for validating checkbox ticks - terms and conditions field or you can use it for validating 'confirm password' field i.e., if the 'password' and 'confirm password' does not match, prevent the submit of the form.
Example - Prevent Default behaviour of checkbox (Terms and Conditions checkbox)
Here is an example of a checkbox field, we want to prevent a person from submitting a form or anything when the checkbox is not ticked. So, here is the implementation for the same The logic here is - if you agree to the Terms and Conditions i.e., by checking the box, you are allowed to submit and navigate to the homepage. Else, you will be prevented and you'll stay in the same page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>event.preventDefault</title>
</head>
<body>
I agree to Terms and Conditions
<input type="checkbox" id="termsAndConditions" />
<br />
<button id="dbgptrLink">Submit</button>
<script>
const dbgElement = document.getElementById("dbgptrLink");
const termsAndConditionsElement =
document.getElementById("termsAndConditions");
dbgElement.addEventListener("click", (e) => {
if (!termsAndConditionsElement.checked) e.preventDefault();
else location.href = "https://debugpointer.com";
});
</script>
</body>
</html>
Note that I have changed that anchor tag to a button as it is most suited for this use-case.
Also, invoked events can also be canceled by checking if event is cancelable. An example is a synchronous API call.
Hope these examples illustrated how we use the event.preventDefault() to prevent the default behaviour of an action in JavaScript. A more useful example for this is where you can prevent copy-pasting of content from your website using event.preventDefault().
