How can I stop a link from navigating while handling its click?

Call preventDefault() on the click event, inside the handler for that link. For example:

const link = document.querySelector("#details-link");

link.addEventListener("click", (event) => {
  event.preventDefault();
  showDetails();
});

Here, showDetails() is a placeholder for the action your page actually performs. The important pairing is that the handler cancels the link’s normal navigation and then does something useful instead. Google’s single-page-app example uses event.preventDefault() when the app handles the link by loading a view and updating browser history. [S1]

No. Leave ordinary links alone when clicking them should navigate to their destination. Cancel only a link whose intended action your code is actually handling—for example, an app route that displays another view without a normal page navigation. [S1]

A useful way to decide is to ask: “If JavaScript did not take over this click, would the link’s destination still be the right result?” If yes, preserve the normal link behavior. If your app is deliberately taking over that route, the handler can cancel navigation and perform the app action. Avoid adding a blanket handler that calls preventDefault() for every link; that can suppress links you meant to keep working normally.

Assume this link represents an in-app route and that your application supplies showView():

<a href="/help" id="help-link">Help</a>

const link = document.querySelector("#help-link");

link.addEventListener("click", (event) => {
  event.preventDefault();
  showView("help");
  history.pushState({}, "", "/help");
});

The example illustrates the same broad pattern as Google’s single-page-app guidance: cancel the link’s browser navigation, load the requested view, and update history with pushState. [S1] showView() is an assumed placeholder, not a built-in function. The cited example does not establish how to handle every browser event edge case, so treat this as a basic pattern rather than a complete router.

Check that the handler is attached to the link you clicked, that preventDefault() is called on that handler’s event, and that the handler only cancels navigation when your code provides the intended alternative. If you want a link to navigate normally, remove the cancellation for that link. If you are building a client-side route, confirm that your route-handling code performs the intended view change; the cited Google example demonstrates a routing pattern but does not explain all event cases or troubleshoot a particular page. [S1]

Before keeping the change, test one app-handled link and one ordinary link. The first should perform your app’s action; the second should retain its intended navigation.