jQuery event.preventDefault()

What You’ll Learn

event.preventDefault() cancels the browser’s default action for an event — link navigation, form submit, and more. This tutorial covers the official jQuery demo, SPA links, AJAX forms, conditional validation, and how it differs from stopPropagation() and return false.

Introduction

Many DOM events trigger a default browser action — clicking a link navigates, submitting a form reloads the page, pressing Enter in some inputs submits. When your JavaScript should handle the interaction instead, call event.preventDefault().

jQuery has exposed this method since version 1.0 on its normalized event object. The official demo prevents link navigation and appends a message to #log, proving the default click action was cancelled while your handler still runs.

Understanding event.preventDefault()

This method tells the browser: do not perform the native action for this event.

• Link clicks — stops navigation to the href URL.
• Form submit — stops the page reload and native POST/GET.
• No arguments — call it with empty parentheses; returns undefined.
• Bubbling continues — parent handlers still run unless you also call stopPropagation().

📝 Syntax

Official jQuery API form (since 1.0):

event.preventDefault()
// typical pattern:
$( "a" ).on( "click", function ( event ) {
  event.preventDefault();
  // custom logic replaces navigation
});

Parameters

• None — this method does not accept any arguments.

Return value

• undefined — the method cancels default action as a side effect; it does not return a meaningful value. Use event.isDefaultPrevented() to check state afterward.

Official jQuery API example

$( "a" ).on( "click", function ( event ) {
  event.preventDefault();
  $( "<div/>" ).append( "default " + event.type + " prevented" ).appendTo( "#log" );
});

Examples Gallery

Example 1 follows the official jQuery demo. Examples 2–5 cover SPA links, AJAX submit, conditional validation, and preventDefault vs stopPropagation.

$( "a" ).on( "click", function ( event ) {
  event.preventDefault();
  $( "<div/>" ).append( "default " + event.type + " prevented" ).appendTo( "#log" );
});

#log shows: "default click prevented"
Link does not navigate

$( "#spa-link" ).on( "click", function ( event ) {
  event.preventDefault();
  $( "#status" ).text( "Navigation prevented — loading route via JS" );
});

#status shows "Navigation prevented — loading route via JS"
Page stays on same URL — no navigation

$( "#myForm" ).on( "submit", function ( event ) {
  event.preventDefault();
  $.post( "/api/save", $( this ).serialize() );
});

Form does not reload the page
$.post sends serialized data to /api/save

$( "#myForm" ).on( "submit", function ( event ) {
  if ( $( "#name" ).val().trim() === "" ) {
    event.preventDefault();
    $( "#error" ).text( "Name is required" );
  }
});

Empty name → #error shows "Name is required", form stays on page
Filled name → native submit proceeds (no preventDefault)

$( "#parent" ).on( "click", function () {
  $( "#log" ).append( "<div>parent handler ran</div>" );
});
$( "#child-link" ).on( "click", function ( event ) {
  event.preventDefault();
  $( "#log" ).append( "<div>default prevented, bubbling continues</div>" );
});

#log shows both:
"default prevented, bubbling continues"
"parent handler ran"
Link does not navigate

🚀 Common Use Cases

• SPA routing — intercept link clicks and load views without full page reload.
• AJAX forms — prevent submit reload and post data with $.ajax or $.post.
• Custom validation — block submit when fields fail client-side checks.
• Modal triggers — prevent anchor navigation when href="#" would jump the page.
• Drag-and-drop UI — cancel default on certain mouse or touch events where needed.
• Progressive enhancement — only prevent default when JavaScript enhancement is active.

📝 Notes

• Available since jQuery 1.0 — returns undefined.
• Takes no arguments — call with empty parentheses.
• Cancels default browser action only — not bubbling or other handlers.
• Works on cancelable events — click on links, submit on forms, etc.
• return false in jQuery handlers also calls preventDefault plus stopPropagation.
• Use event.isDefaultPrevented() (jQuery 1.3+) to verify cancellation in later handlers.

💡 Best Practices