Sometimes, we want to prevent href=”#” link from changing the URL hash with JavaScript.

In this article, we’ll look at how to prevent href=”#” link from changing the URL hash with JavaScript.

How to prevent href=”#” link from changing the URL hash with JavaScript?

To prevent href=”#” link from changing the URL hash with JavaScript, we call preventDefault.

For instance, we write

<a href="/foo/bar" class="link">Foo: Bar</a>

to add a link.

Then we write

addEventListener("click", (ev) => {
  if (ev.target.classList.contains("link")) {
    ev.preventDefault();
    //...
  }
});

to add a click listener to window with addEventListener.

In the event listener, we check if the element being clicked on has class link with classList.contains.

If it’s true, then we call preventDefault to stop the default navigation behavior.

Conclusion

To prevent href=”#” link from changing the URL hash with JavaScript, we call preventDefault.