Event

Event.prototype.preventDefault

Tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be

Syntax

JavaScript
event.preventDefault()

Return Value

undefined

Examples

Basic Usage
document.querySelector('form')!.addEventListener('submit', (e) => {
  e.preventDefault()
  console.log('Form submission prevented')
})
Practical Example
document.querySelector('a')!.addEventListener('click', (e) => {
  e.preventDefault()
  console.log('Navigation prevented, href:', (e.target as HTMLAnchorElement).href)
})
Advanced Usage
const input = document.querySelector('input')!
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault()
    console.log('Enter key blocked')
  }
})

Understanding Event.prototype.preventDefault

The Event.prototype.preventDefault method in JavaScript tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. It belongs to the Event object and is one of the most widely used methods for working with event values in modern JavaScript and TypeScript applications.

The method signature is event.preventDefault(). When called, it returns undefined. Understanding when and how to use preventDefault() helps you write more expressive, readable code.

Common use cases for Event.prototype.preventDefault include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like event-stoppropagation, event-stopimmediatepropagation, event-defaultprevented, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for Event.prototype.preventDefault is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.

Browser Compatibility

Supported in all modern browsers (Chrome, Firefox, Safari, Edge) and Node.js. Part of the ECMAScript standard.

Related Methods

Event.prototype.stopPropagation

Prevents further propagation of the current event in the capturing and bubbling phases

Event.prototype.stopImmediatePropagation

Prevents other listeners of the same event from being called and stops propagation

Event.prototype.defaultPrevented

Returns a boolean indicating whether or not the call to Event.preventDefault() canceled the event

More Event Methods

Other methods in the Event object

Event.prototype.stopPropagationEvent.prototype.stopImmediatePropagationEvent.prototype.defaultPreventedCustomEventEventKeyboardEventMouseEventPointerEventView all →

Related Tools

All JS MethodsRegex TesterJSON FormatterAPI Request BuilderURL Query ParserEpoch Converter

More Event Methods

stopPropagation()stopImmediatePropagation()defaultPrevented()CustomEvent()Event()KeyboardEvent()MouseEvent()PointerEvent()

Explore JavaScript Methods

Browse our complete reference of 410 JavaScript methods with syntax, examples, and explanations.

ArrayStringObjectMathDatePromiseJSONNumberRegExpMapSetConsoleGlobal / Window