jQuery event.preventDefault() Method

What Is event.preventDefault()?

event.preventDefault() cancels the browser’s default action for the current event. Clicked anchors will not navigate; forms will not submit — unless you allow them. Takes no arguments, returns undefined. Available since jQuery 1.0. Check with event.isDefaultPrevented().

event.preventDefault()   // no args · returns undefined

$("a").on("click", function (event) {
  event.preventDefault();   // stay on this page
});

// Does NOT stop bubbling — use stopPropagation() for that
// return false in jQuery = preventDefault + stopPropagation

How to Use preventDefault()

Call it early in the handler when you will handle the action yourself.

1. Bind the event that has a default (click on links, submit on forms).
2. In the handler, call event.preventDefault().
3. Run your own logic (update UI, AJAX, SPA route, validation message).
4. Optionally check later with event.isDefaultPrevented().
5. Do not assume bubbling stopped — call stopPropagation() only if you need that too.

Pseudocode

element.on("click" | "submit" | …, handler)

when event fires:
    if we handle it ourselves:
        event.preventDefault()
        // default navigation / submit will NOT run
        do custom work
    // event still bubbles to parents
    // unless stopPropagation() or return false

Cheat Sheet

Keep these facts handy while cancelling defaults.

Live Preview

Click the link — navigation is cancelled and a log line is added, like the official jQuery API demo.

Click the link above.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("a").on("click", function (event) {
  event.preventDefault();
  $("#out").append("default " + event.type + " prevented\n");
});

default click prevented

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

Navigation prevented — handle route in JS

$("#myForm").on("submit", function (event) {
  event.preventDefault();
  $("#out").text(
    "Page did not reload — data: " + $(this).serialize()
  );
});

Page did not reload — data: name=Ada

$("#myForm").on("submit", function (event) {
  if ($("#name").val().trim() === "") {
    event.preventDefault();
    $("#out").text("Name is required");
  } else {
    event.preventDefault(); // demo stays on page
    $("#out").text("Looks good — would submit");
  }
});

Name is required
— or —
Looks good — would submit

$("#parent").on("click", function () {
  $("#out").append("parent handler ran\n");
});

$("#child-link").on("click", function (event) {
  event.preventDefault();
  $("#out").append("default prevented, bubbling continues\n");
});

default prevented, bubbling continues
parent handler ran

Performance Notes

Calling preventDefault() is cheap. Cost comes from the custom logic you run afterward — keep that focused.

Key Takeaways