Make every anchor tag with hash (#) in href unclickabe

Question

Is there a way to achieve this in javascript. Below is the example of anchor tag

<a href="#">Example</a>

Answer 1

With event delegation, you can attach an event listener to the body and preventDefault when any <a> is clicked which has that href.

document.body.addEventListener('click', (e) => {
  const a = e.target.closest('a');
  if (a.href === '#') {
    e.preventDefault();
  }
});

<a href="#">Example</a>

That'll prevent the # in the URL. If you want to make it truly unclickable, you can use pointer-events: none.

a[href="#"] {
  pointer-events: none;
}

<a href="#">Example</a>