Default actions in JavaScript events

What the browser does on its own

People click, type, scroll, and send forms on a web page. For many of these, the browser already knows what to do. This built-in behavior is called the default action.

Some default actions you already know:

• Click a link: the browser goes to the link's page.
• Send a form: the browser sends what you typed and loads a new page.
• Click a checkbox: it turns on or off.
• Press a letter key in a text box: the letter appears.
• Press Space: the page scrolls down.
• Right-click: the browser opens its own menu, called the context menu.

Default actions are why a plain HTML page works before you write any JavaScript.

Your JavaScript can listen for the same events. A listener is a function you add with addEventListener. The browser calls it when the event happens. So one click can start two kinds of work: your listeners, and the browser's default action.

This lesson uses ideas from three earlier lessons: Introduction to events, Bubbling & capturing, and Event delegation. The main idea you need: one event can run several listeners, one after another, and a later listener can see what an earlier one did.

Every listener gets an event object. It describes what happened, such as which element was clicked. One of its methods is event.preventDefault(). It tells the browser: "Don't do the default action for this event."

It only works if the event is cancelable. That means the browser allows this event's default action to be stopped. The event tells you: event.cancelable is true or false.

Two things preventDefault() does not do:

• It does not stop the event's trip. After the clicked element's listeners run, the event moves up to its parent elements, and their listeners still run. This trip is called propagation. To stop it, you call a different method, stopPropagation().
• It does not undo something that already happened. It only stops the browser's next step.

The step-through below copies a real click with a plain object, so you can watch every line. Lines 1 to 8 make that object. Its preventDefault() sets defaultPrevented to true, but only when cancelable is true. Then come two listeners:

• linkListener stands for a listener on the link. It runs first.
• routerListener stands for a listener on a parent element. It runs second. A router is code that changes what the page shows when you click a link.

1const event = {Run2  type: "click",3  cancelable: true,4  defaultPrevented: false,5  preventDefault() {6    if (this.cancelable) this.defaultPrevented = true;7  },8};9 10function linkListener(event) {11  event.preventDefault();12  console.log("link listener finished");13}14 15function routerListener(event) {16  if (event.defaultPrevented) {17    console.log("router skipped");18    return;19  }20  console.log("router handles the click");21}22 23linkListener(event);24routerListener(event);25console.log(event.defaultPrevented);

With line 11 calling preventDefault(), linkListener cancels the default action. But routerListener still runs, because nothing stopped the event's trip. On line 16 it reads event.defaultPrevented, sees true, and skips its own work. Switch line 11 to the other choice and run it again: now the router handles the click.

The best way to learn default actions is to try real ones. The playground below has five real parts of a page:

• a link
• a form
• a checkbox
• a text box
• an area you can right-click

Each part has a listener, added with addEventListener. Each listener has a switch. On "prevent", the listener calls preventDefault(). On "allow", it does not, so the default action runs.

1link.addEventListener("click", maybePreventLink);2form.addEventListener("submit", maybePreventForm);3checkbox.addEventListener("click", maybePreventCheckbox);4function maybePrevent(event, switchIsOn) {5  if (switchIsOn && event.cancelable) event.preventDefault();6  log(event.type, event.defaultPrevented);7}

The code in the playground shows the idea for three of the parts. Lines 1 to 3 add a listener to the link, the form, and the checkbox. Line 5 calls preventDefault() only when the switch is on and the event is cancelable. Line 6 logs the event type and defaultPrevented.

Try these:

• Set the link to "allow" and click it. The page jumps, and the hash (the part of the address after #) changes.
• Set the checkbox to "prevent" and click it. It does not change.
• Set the input keys to "prevent" and type. No letters appear.
• Set the context menu to "allow" and right-click the area. The browser may open its own menu.

Scrolling must feel instant. Two events can cancel scrolling:

• wheel: you turn a mouse wheel or swipe on a trackpad.
• touchmove: your finger moves on a touch screen.

If one of these events has a listener, the listener might call preventDefault(). So the browser may have to wait for the listener to finish before it moves the page. That wait can make scrolling feel slow.

A passive listener fixes this. You add it with the option { passive: true }. It is a promise to the browser: "I will not call preventDefault()." So the browser can scroll at once, without waiting.

A passive listener is the same. It can log and update things, but it cannot stop the scroll. In the playground below, line 7 sets the passive option, and line 4 tries to cancel. Turn each button on and off and scroll inside the box.

1box.addEventListener("wheel", (event) => {2  log("cancelable", event.cancelable);3  if (shouldBlock) {4    event.preventDefault();5  }6  log("defaultPrevented", event.defaultPrevented);7}, { passive });

What to know about passive listeners:

• If a passive listener calls preventDefault(), modern browsers ignore the call. defaultPrevented stays false.
• Some browsers make touchstart, touchmove, and wheel listeners on window, document, or body passive on their own, even if you don't ask.
• Use { passive: false } only when stopping the scroll is the whole point, like in a drawing area.
• CSS often does the job better. touch-action tells the browser which finger gestures an element handles itself. overscroll-behavior stops a scroll from moving on to the page behind when an inner box reaches its end.

When preventDefault() works, the event remembers it: event.defaultPrevented becomes true. It is a true-or-false value, called a boolean.

Every later listener gets the same event object. So a later listener can read defaultPrevented and skip its own work.

The playground below has two listeners on one parent element. A button stands in for the link. The code on the left works like this:

• Lines 1 to 3: the first listener cancels the click if it was on a link. event.target is the element that was clicked, and .matches("a") checks that it is an a (link) element.
• Lines 4 to 7: the second listener returns early if defaultPrevented is true. Otherwise it runs the router.
• Lines 8 and 9: make a scroll event that is not cancelable, and call preventDefault() on it. Nothing changes.

1panel.addEventListener("click", (event) => {2  if (event.target.matches("a")) event.preventDefault();3});4panel.addEventListener("click", (event) => {5  if (event.defaultPrevented) return;6  runRouterBehavior();7});8const scroll = new Event("scroll", { cancelable: false });9scroll.preventDefault();

You will see this a lot with event delegation, where one listener on a parent element handles clicks for many children. The parent's listener checks defaultPrevented first. If a child already canceled the default action, the parent leaves the click alone.

Not every event can stop its default action. The scroll event is the common trap. It fires after the page has already scrolled, so there is nothing left to stop. Its cancelable is false.

To stop scrolling, cancel the event that comes before the scroll: the wheel event, the touchmove event, or the key press that would scroll the page.

The table below has one row for each thing you might want to stop. Read across to see which event to cancel, and which event is the wrong one.

Where you will use this

Cancel a default action when you replace it with your own behavior. Your behavior must work for everyone, including people who use only a keyboard. Here are the patterns you will see most.

1form.addEventListener("submit", (event) => {2  event.preventDefault();3  saveWithJavaScript(new FormData(form));4});

Line 2 stops the form from being sent and a new page loading. Line 3 saves the data with JavaScript instead. new FormData(form) collects every field in the form. Show people what is happening: a loading message, then a success or error message.

1validationForm.addEventListener("submit", (event) => {2  const message = validationForm.elements.message.value.trim();3  if (!message) {4    event.preventDefault();5    validationError.textContent = "Enter a message";6    return;7  }8  console.log("ready to submit", message);9});

• Line 2 reads the message box. .trim() removes spaces at the start and end, so a message of only spaces counts as empty.
• If the message is empty, line 4 stops the form from being sent, and line 5 shows an error message on the page.
• If there is a message, the listener does not cancel. Line 8 logs it, and the form is sent as normal.

Put this check on the form's submit event, not on the button's click. People can also send a form by pressing Enter, and submit catches every way.

1modalLink.addEventListener("click", (event) => {2  event.preventDefault();3  modal.hidden = false;4  modalClose.focus();5});6 7modalClose.addEventListener("click", () => {8  modal.hidden = true;9  modalLink.focus();10});

A modal is a box that opens on top of the page. Here a link opens it:

• Line 2 stops the link from going to its address.
• Line 3 shows the modal by setting hidden to false.
• Line 4 moves keyboard focus to the modal's Close button, so keyboard users land inside it.
• Lines 8 and 9 hide the modal again and move focus back to the link.

The link still has a real address in its href. If JavaScript does not run, clicking it still goes somewhere useful.

1menuArea.addEventListener("contextmenu", (event) => {2  event.preventDefault();3  openMenu(event.clientX, event.clientY);4});5 6menuButton.addEventListener("click", () => openMenu(0, 0));7menuButton.addEventListener("keydown", (event) => {8  if (event.key === "Enter" || event.key === " ") openMenu(0, 0);9});

• Line 1 listens for contextmenu, the event for a right-click or a long press on a touch screen.
• Line 2 stops the browser's own menu, but only inside this area.
• Line 3 opens your menu where the pointer is. clientX and clientY are the pointer's position.
• Lines 6 to 8 give another way in: a visible button that opens the same menu with a click, or with Enter or Space.

In a full menu, also close it with Escape and move focus back to where it was.

1input.addEventListener("keydown", (event) => {2  if (event.key === "x") {3    event.preventDefault();4  }5});

Line 2 checks which key was pressed. Line 3 cancels only the x key, so x never appears. Every other key types as normal.

Be careful with keys. People rely on the arrow keys, Tab, Space, Enter, and browser shortcuts. Cancel only the exact key you replace, and give another way to do the same thing.

• Single-page apps

  A link goes to another page on the same site. Cancel the click, change the address with the History API (the browser's tool for the address bar), and show the new content. No whole new page loads.

• Drawing and maps

  In a drawing area or a map, cancel only the finger and mouse moves your app handles itself. Use CSS touch-action when it can do the job.

• Widgets inside a parent

  A child widget calls preventDefault(). The listener on the parent checks defaultPrevented before it does anything.

• "preventDefault() stops bubbling." No. It only cancels the default action. The event still moves up to the parent elements. Stopping that is a separate choice.
• "stopPropagation() stops the default action." No. It only stops the event from reaching parent elements. A link still goes to its page.
• "return false always cancels." Not in a listener added with addEventListener. There, the browser ignores what you return. Call preventDefault() instead.
• "Passive is just a faster way to write a listener." No. Passive means the listener cannot cancel the default action.
• "Every event has a default action you can cancel." No. Check event.cancelable, and cancel the right earlier event.
• "Stopping a default action is harmless." Many default actions help people who use a keyboard or a screen reader. If you remove one, replace it.

1button.addEventListener("click", (event) => {2  return false; // does not cancel an addEventListener default3});4 5button.onclick = function (event) {6  return false; // old property handlers cancel the default7};

• Line 2 returns false from a listener added with addEventListener. The browser ignores it, so the default action still happens.
• Line 6 returns false from an old-style onclick handler, a function stored in the element's onclick property. There, false does cancel the default action.

This difference is old and easy to mix up. Always call event.preventDefault(), so anyone reading your code knows what you mean.

The table below compares four tools. Read across each row to see what the tool changes and what it leaves alone.

Key takeaways

• A default action is what the browser does on its own after an event.
• preventDefault() works only on cancelable events. A passive listener cannot cancel at all.
• The browser does the default action after every listener has run. So a later listener can still read defaultPrevented.
• Canceling the default action and stopping the event's trip to parent elements are two separate choices.
• Many default actions help people. Don't remove keyboard, scrolling, selection, form, or menu behavior without giving something in its place.

A default action is what the browser does on its own after an event. event.preventDefault() cancels it, but only when the event is cancelable and the listener is not passive.

Up next: Custom events.