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?

use window.location.href to check which page you are on and use event.preventDefault() as well as add a click event on the a tag. — DCR, Apr 09 '22 at 16:51
@DCR this worked, thanks, I'll give feedback if it somehow "unworks" suddenly — starter_dev, Apr 09 '22 at 17:15
@Bella Since jQuery is JavaScript it *must* be possible, otherwise jQuery couldn’t do it :) — Dave Newton, Apr 09 '22 at 17:57
@Dave Newton, jQuery is a javascript library. An extension for javascript. — Bella, Apr 09 '22 at 18:02
@Bella I'm aware of what jQuery is (it's a library). jQuery is written in JavaScript. If jQuery can do something, so can vanilla JavaScript. — Dave Newton, Apr 09 '22 at 18:16
@Dave Newton, well indeed you could but you would have to write the whole library again in order to use its function. — Bella, Apr 09 '22 at 18:39
@Bella ... You'd only need to write the part the OP is talking about--getting the links in question, and disabling their event handlers, both of which have 1-1 equivalents in vanilla JS :) My point, however, was that anything jQuery can do can be done with vanilla JS by definition since jQuery is written in vanilla JS. — Dave Newton, Apr 09 '22 at 18:47

score 0 · Accepted Answer · edited Apr 19 '22 at 05:01

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.

very interesting solution, is it possible maybe for the second solution you've sent, to define those functions outside of EventListener's scope and then just use the identificator of the function to call it within EventListener? sorry im new to JS — starter_dev, Apr 09 '22 at 17:36
I don't understand you at all. What do want to say with "those functions"? — Victor, Apr 09 '22 at 17:44

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?

1 Answers1