Is there a way to disable href link / links if the user is already on the page the href link / links leads to, without using JQuery?

Question

So I have something like this in my html:

<a id="one" href="/index.html"> HOME </a>
<a id="two" href="/something.html"> SOMETHING </a>
<a id="three" href="/again.html"> AGAIN </a>

and if for example user is on page linked "..../index.html" and tries to click on "HOME" link button, it does nothing or fake redirects or its disabled to be clickable, same goes for other href buttons if the user is already on the page the buttons are redirecting to, and user tries to click on them, I have been looking everywhere but all solutions for this problem requires you to use JQuery, and I would like to not use libraries as much as possible, any solutions?

Answer 1

For simplicity, add a class to all menu links in which you want this behavior

<a class="locationLink" id="one" href="/index.html"> HOME </a>
<a class="locationLink" id="two" href="/something.html"> SOMETHING </a>
<a class="locationLink" id="three" href="/again.html"> AGAIN </a>

And check this:

var links = document.getElementsByClassName("locationLink");
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    if (link.classList.contains('locationLink') && location.href == link.href) {
        link.addEventListener("click", function (event) {
            event.preventDefault();
        });
        break;
    }
}

Basically, you get all links and check only your locationLinks. If the current url is equals to the href, you add an event listener that blocks the navigation. Maybe you need some debugging in the "location.href == link.href" because relative/absolute urls (you can refer to https://stackoverflow.com/a/44547904/18452174) but it's working.

If your menu can change dynamically, you can try this other approach:

document.addEventListener("click", function (event) {
    var link = event.target;
    if (link.classList.contains('locationLink') && location.href == link.href) {
        link.addEventListener("click", function (event) {
            event.preventDefault();
        });
    }
}, false);

You do the same but check the condition in each document click instead only one time in document load.