How to prevent default in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Preventing default browser behavior is essential when you want to handle events with custom logic instead of letting the browser perform its default action.
As the creator of CoreUI, a widely used open-source UI library, I’ve used preventDefault extensively in form validation, custom navigation, and interactive components.
From my expertise, the preventDefault() method is the standard way to stop default actions like form submissions, link navigation, or key presses.
This approach gives you complete control over user interactions while maintaining accessibility.
Use event.preventDefault() to stop the browser’s default behavior for an event.
document.querySelector('form').addEventListener('submit', (event) => {
event.preventDefault()
// Handle form submission with custom logic
})
Here event.preventDefault() stops the form from performing its default submission behavior, allowing you to handle the submission with custom JavaScript instead. This method works with any event that has a default action, such as clicking links, pressing keys, or right-clicking for context menus.
Best Practice Note:
Always call preventDefault() early in your event handler to ensure it takes effect. This is the same approach we use in CoreUI components to create custom form validations and interactive behaviors while maintaining user experience.
