Some Links Aren't Actually Links

There are quite few useful things you can do with a link. Whether it's hyperlinked and underlined blue text, or even an image that is a link, web browsers provide quite a bit of functionality by default when you have a real link in a webpage.

1: the mouse cursor changes when you hover a link.

2: while hovering the link, the linked URL is indicated on the statusbar, or in the bottom area of the main pane of the web browser.

3: you can right click a link to view its context menu, and in there you can choose to open the link in a new tab, or copy the link's URL to the clipboard.

4: many people don't click this, but you can middle click links to open them in a new tab without opening a context menu! You can also Ctrl+Left Click to open in a new tab, or Shift+Left Click to open in a new window in Chrome!

5: links can receive keyboard focus, which means you can navigate to a link by pressing the tab key several times, and open it with the enter key (or Ctrl+Enter to open in a new tab, or Shift+Enter to open in a new window).

6: although most websites disable this functionality, the web browser can remember which links you visited, and visited links become purple by default after you visit them!

Wow, that's a lot of stuff, isn't it? What if I told you that some websites, for reasons far beyond my understand, decide to throw all of this in the garbage and give us something that looks like a link, but isn't?

In a webpage, a real link is declared using the HTML code <a>. It stands for "anchor." I don't get why either. You can make anything behave somewhat like a link using a Javascript. Essentially, you attach an event handler that handles a "click" event. When you click the thing, the handler is triggered, and that handler can do all sorts of things, including making the web browse access a different URL just like a link would.

Websites like Spotify do this. When you click on a "pseudolink" on Spotify, you're clicking on a thing that triggers some Javascript that opens the post. Which means you can't just right click a post to open it in a new tab.

Note that there is (generally) no reason to replace real links with inferior link-ish buttons. That's because any functionality that you might wish to add to a "click" can just be added to a link.

Javascript events handlers can choose to "cancel" the default behavoir. If a "click" handler is attached to a link, it can cancel the web browser's default behavior of a link click. This means that the browser won't access a different page when you click the link, and the developer is free to make the link do whatever they want, while still keeping all sorts of built-in functionality like ctrl+clicking, right clicking, URL in the navbar, etc.

Caveats

In developers' defense, HTML is a terrible language, so there are a couple of problems with using links directly.

No Links Inside Links?!

The first big problem, and totally HTML's fault, and they somehow haven't fixed this in 20 years, is that you can't have a link that is inside another link.

Now, if you're someone who never used a website before, you may be thinking "why would anyone ever need to put a link inside another link?" But if you have used websites before, you can probably guess why.

In many cases, clicking on a rectangle, like a post, opens the post, but this clickable rectangle has click targets within it (e.g. hashtags, author links, avatars, etc.) that when clicked on perform different actions and perhaps go to different URLs.

It seems there is a way to make this work nowadays by using web components that inherit from the anchor element, but I haven't personally tried it myself.

Accidentally Disabling Default Behavior

Another huge issue is that if you attach a "click" event handler to a link, this event handler will be triggered on EVERY click, which means that if you simply cancel the default behavior, you may be cancelling things you aren't supposed to.

As we've already learned, we can left click, middle click, right click, ctrl click, and even shift click links. This means that the only scenario that should be handled by the website is:

1. The user clicked.
2. With the left mouse button.
3. Without pressing any modifier key.

I'm sure that some web developers out there aren't even aware you can ctrl click links, and if they aren't aware of that, they won't know to explicitly ignore modifier keys that have been pressed when a click was triggered.

This is of course not the developer's fault. This is Javascript's fault. I just want to replace the default behavior of a left click, and there is no event handler specifically for that, which will induce error. People are going to write code that does more than it should and they won't even be aware of it.

By the way, things get extremely more complicated if you want to handle the hover event instead of the click event. For example, let's say I want to display an image larger when you click on it, so I change the mouse cursor to a magnifying glass. However, the image is also a link, so you can ctrl click it to open it in another tab. When ctrl is held, the action that clicking will perform is different, so, naturally, the mouse cursor should be different. I want the default cursor when ctrl or shift is held. There is no way to actually just do this. I managed to do it by keeping track of every time a modifier key is pressed or released on the webpage, globally. I guess it works, at least!