What is preventDefault()?

The preventDefault() method is part of the Event interface in JavaScript. It is used to cancel the browser’s default behavior associated with a particular event, without stopping the event from bubbling or reaching other event handlers.

Syntax

event.preventDefault();

• event is the event object passed to the event listener.
• This method does not return a value.

Common Use Cases

Scenario	Default Behavior	Why Use preventDefault()?
Clicking a link (<a href="...")	Navigates to the URL	Prevent navigation to run custom logic instead
Submitting a form	Reloads the page and sends form data	Use JavaScript to validate or send data via AJAX
Pressing a key	May trigger scrolling or shortcuts	Prevent undesired key actions
Drag-and-drop	May open files in the browser	Prevent automatic file handling

Example 1: Prevent Link Navigation

HTML:

<a href="https://www.example.com" id="myLink">Go to Example</a>

JavaScript:

const link = document.getElementById('myLink');

link.addEventListener('click', function (event) {
  event.preventDefault(); // Prevent navigation
  alert('Link was clicked, but navigation was prevented!');
});

Output:

• The alert shows up.
• The page does not navigate to “https://www.example.com”.

Example 2: Prevent Form Submission

HTML:

<form id="myForm">
  <input type="text" name="name" />
  <button type="submit">Submit</button>
</form>

JavaScript:

const form = document.getElementById('myForm');

form.addEventListener('submit', function (event) {
  event.preventDefault(); // Prevent form from submitting normally
  alert('Form submission intercepted!');
});

Output:

• The form doesn’t reload the page.
• You can handle submission logic using JavaScript (e.g., fetch/AJAX).

Example 3: Prevent Right-Click Context Menu

document.addEventListener('contextmenu', function (event) {
  event.preventDefault();
  alert('Right-click disabled on this page!');
});

The browser’s context menu will not open when you right-click.

When preventDefault() Doesn’t Work

Calling event.preventDefault() only works if the event is cancelable.

You can check it using:

if (event.cancelable) {
  event.preventDefault();
}

If cancelable is false, then calling preventDefault() has no effect.

How It Differs from stopPropagation() and stopImmediatePropagation()

Method	Purpose	Stops Bubbling?	Prevents Default?	Stops Other Handlers?
preventDefault()	Stops browser default behavior	No	Yes	No
stopPropagation()	Stops event bubbling	Yes	No	No
stopImmediatePropagation()	Stops bubbling & all handlers on same target	Yes	No	Yes

Real-World Example: Submit Button Validation

HTML:

<form id="loginForm">
  <input type="text" id="username" placeholder="Username" />
  <button type="submit">Login</button>
</form>

JavaScript:

const loginForm = document.getElementById('loginForm');

loginForm.addEventListener('submit', function (event) {
  const username = document.getElementById('username').value;

  if (!username.trim()) {
    event.preventDefault(); // Stop the form from submitting
    alert('Username is required!');
  }
});

Conclusion

• preventDefault() gives you control over how your application handles user interactions.
• It allows you to override the browser’s native behavior and replace it with custom logic.
• Common uses include handling form submissions, links, drag-and-drop, and keyboard events.