Using event.preventDefault() in a jQuery Click Handler

In web development, the event.preventDefault() method stops a browser from executing its native action for an HTML element when an event occurs. When used inside a jQuery click handler, it intercepts the user's action—such as following a hyperlink or submitting a form—and suppresses that default behavior while allowing your custom JavaScript logic to execute. This article explains how event.preventDefault() works, provides common implementation examples, and clarifies how it differs from other event-handling techniques in jQuery.

What event.preventDefault() Does

HTML elements inherently possess default behaviors. For example:

  • Clicking an anchor tag (<a>) navigates the browser to the specified href URL.
  • Clicking a submit button (<button type="submit"> or <input type="submit">) sends form data to a server and refreshes the page.
  • Clicking a checkbox toggles its checked state.

When you pass the jQuery event object into an event listener callback function (commonly denoted as e or event), calling event.preventDefault() tells the browser to cancel the native action associated with that element.

How to Use It in jQuery

To use event.preventDefault(), you must accept the event object as an argument in your click handler callback.

Anchor tags are often used as interactive UI controls (like opening modals or tabs). Without preventDefault(), clicking a link with href="#" will jump the user to the top of the page.

$('#myLink').on('click', function(event) {
    // Stop the browser from navigating or jumping
    event.preventDefault();

    // Custom logic executes instead
    console.log('Link clicked, but navigation was prevented.');
});

Example 2: Handling Form Submissions via AJAX

When handling form data asynchronously using AJAX, you need to intercept the click event of the submit button to keep the page from reloading.

$('#submitBtn').on('click', function(event) {
    // Prevent the default form submission and page reload
    event.preventDefault();

    // Perform an asynchronous AJAX request instead
    $.ajax({
        url: '/api/submit',
        method: 'POST',
        data: $('#myForm').serialize(),
        success: function(response) {
            console.log('Data successfully submitted:', response);
        }
    });
});

event.preventDefault() vs. event.stopPropagation()

It is important to understand the boundary of what preventDefault() affects:

  • event.preventDefault(): Stops the browser's default action, but does not stop the event from bubbling up the DOM tree to parent elements.
  • event.stopPropagation(): Stops the event from bubbling up to ancestor elements, but does not stop the browser's default action on the target element.

If you need to both cancel the default browser action and stop the event from triggering parent listeners, call both methods:

$('#button').on('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
});

event.preventDefault() vs. return false

In native JavaScript, returning false from an inline event listener prevents the default behavior. However, in jQuery, returning false inside an event handler is equivalent to calling both event.preventDefault() and event.stopPropagation().

Using event.preventDefault() explicitly is generally preferred because it avoids inadvertently breaking event delegation and allows parent listeners to still monitor user interactions.