Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsClicking a normal <a href="..."> element can reload the document because its primary job is navigation. The browser follows the URL in href, requests that destination, and loads the resulting document. That is correct behavior, not a browser error. Stop the reload only when your application is intentionally taking over an internal navigation, such as an SPA route; otherwise, keep the native link.
What the browser is doing
An anchor with a real destination is a hyperlink. A path such as /account, an absolute URL, a file, a mailto: address, or a download tells the browser to navigate. A navigation normally creates a document request, so the current page is replaced and its scripts start again.
As an Amazon Associate I earn from qualifying purchases.
A fragment link such as <a href="#details">Details</a> is also a real URL destination. It moves to the element whose id is details and may update the address bar without requesting a new document.
Find out whether it is navigation or a form submission
- Inspect
href. A non-empty URL means the browser has somewhere to navigate. Check for relative paths, absolute URLs, fragments, files, andmailto:links. - Check the surrounding form. A click can trigger a form submission in addition to a link handler. Inspect the form’s submit listener and ensure controls that are not meant to submit use
<button type="button">. - Verify router integration. In a single-page application, a plain anchor still has native browser behavior unless a router link component or click handler intercepts it.
- Use the Network panel. A new document request after the click indicates native navigation. If no document request occurs and only the view changes, client-side routing handled the interaction.
- Check the click context. Users may hold Ctrl, Command, Shift, or Alt, use the middle mouse button, choose “open in new tab,” or click a link with a different target. Those interactions should generally retain native behavior.
- Check handler order and errors. If code throws before calling
preventDefault(), the browser proceeds with navigation. Put cancellation at the start of the guarded branch and handle fetch or rendering failures afterward.
Use the right element for the job
| Intent | Recommended markup | Why |
|---|---|---|
| Navigate to another page or route | <a href="/account">Account</a> |
Preserves URL semantics, keyboard behavior, copying, bookmarking, and new-tab support. |
| Run an action without navigation | <button type="button">Open panel</button> |
Communicates action semantics to browsers and assistive technology. |
| Move within the current document | <a href="#details">Details</a> |
Uses a valid fragment destination and supports normal link workflows. |
| Client-side route in an SPA | Framework router link or guarded anchor handler | Allows the app to render a view without replacing the document while preserving history. |
How to intercept an application-owned route
Call preventDefault() only for links your application owns. Then render the destination and update browser history; cancellation by itself creates a dead link.
#1 Best Overall
document.addEventListener("click", async (event) => {
const link = event.target.closest("a[data-route]");
if (!link) return;
// Keep browser features such as new tabs and downloads working.
if (
event.defaultPrevented ||
event.button !== 0 ||
event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ||
link.target === "_blank" ||
link.hasAttribute("download") ||
new URL(link.href, location.href).origin !== location.origin
) return;
event.preventDefault();
const url = new URL(link.href, location.href);
try {
const response = await fetch(url.pathname + url.search);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const html = await response.text();
document.querySelector("main").innerHTML = html;
history.pushState({}, "", url.href);
} catch (error) {
// Show an error state or fall back to a full navigation.
console.error(error);
location.href = url.href;
}
});This pattern limits interception to same-origin, left-button, unmodified clicks marked with data-route. A production router also needs a popstate listener so Back and Forward render the corresponding history entry rather than leaving the view unchanged.
React and other SPA frameworks
React does not change native anchor behavior. Writing <a href="/settings">Settings</a> in a React component still requests /settings as a document unless the routing library intercepts it. Use the link component supplied by the router for internal routes, and use a normal anchor for external destinations, downloads, or links that should work even when JavaScript fails.
Rank #2
If you add a custom React click handler, attach event.preventDefault() before asynchronous work, render the route, and update history through the router’s API. Do not cancel every anchor globally: doing so breaks external links, modifier-key navigation, downloads, and context-menu actions.
Why href="#" and javascript:void(0) are poor fixes
These values attempt to disguise an action as a link. href="#" can move the viewport to the top and changes the fragment, while javascript:void(0) depends on JavaScript being available and gives users no meaningful destination. Both behave unexpectedly when people copy, drag, bookmark, or open the link in another tab, and both fail when scripts are loading, disabled, or broken. Use a button for an action; use an anchor with a real URL for navigation.
Accessibility and failure behavior
Hyperlinks should represent navigation to a proper URL. Keeping that URL means keyboard users and assistive technologies receive the expected link semantics, and the destination remains usable when JavaScript fails. A client-side router should enhance that behavior rather than remove it: preserve the address bar, support Back and Forward, and provide a rendered destination after intercepting the click.
Quick Recap
Rank #4
Quick decision checklist
- Does the interaction navigate? Use an anchor with a real
href. - Does it only open, close, toggle, submit, or mutate UI? Use a button.
- Is it an internal SPA route? Use the framework router or a narrowly scoped interceptor.
- Is it external, a download, a new-tab target, or a modified click? Leave the browser’s default behavior intact.
- Did you cancel navigation? Make sure the destination is still rendered and history is updated.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
