5 ms·

There's no real alternative to `javascript:void 0`. If you need to have a link that absolutely will not do anything, even under noscript, it's the only solution

There's no real alternative to `javascript:void 0`. If you need to have a link that absolutely will not do anything, even under noscript, it's the only solution. Using `href="#"` is not an alternative, because it messes with the user's navigation history.

ximm 6y ago
Can you give an example on when you would need a link that does not link anywhere? The only cases I can think of are better served by `<button type="button">`.
- webstrand 6y ago
  I use them for progressive enhancement. If javascript is available, I'll add a dynamically generated href, or call .addEventListener("click", ...) and add behaviour to the link. Buttons can be used sometimes, but if you're wanting something that behaves like a link: middle click works, right click "Open in new Tab", Copy link, etc. then a button doesn't work. I prefer to use buttons to affect the state of the current page. And use anchor tags for all other navigation, even if I'm handling it with .addEventListener("click", ...). I suppose I could just hide the non-functional links, or add them dynamically with javascript. But that could affect layout.
  - chrismorgan 6y ago
    If it’s not going to work if JavaScript is unavailable, I would suggest either adding it dynamically with JavaScript, or else omitting the href attribute so that it’s not a link; this could be paired with hiding it, or just giving it attributes like title="JavaScript is required for this link to work" and style="cursor: not-allowed". (Maybe aria-hidden="true" too.)
    - webstrand 6y ago
      That's a reasonable option, I'll have to try that. My only concern is that when an anchor tag has no href attribute, the styling is different. It usually behaves as plain text, if I remember correctly, which is really confusing if you expected a link. Nothing that styling can't fix, but that's why, historically, I have always tried provide an href tag, even if it's just href="javascript:void 0". Still, your solution is nicer in many ways, thanks.
      - chrismorgan 6y ago
        My point is that it semantically isn’t a link until the JavaScript executes (if it ever does). A link is something you can click on and it does something. But yeah, stylesheets might need adjustment for best results if you want to keep it on-screen even when it’s not operative, e.g. add a class link-needs-js which you style along with your :link, :visited. In the hidden versus disabled thing, I do approximately this, if I have functionality that can’t work without JS (for whatever reason): if it’s completely optional, I hide it; if it’s important, I show it with a disabled style including not-allowed cursor (the disabled attribute if it’s a button, or a class if it’s an anchor) and some kind of “JS required” title, to at least give a hint as to why it’s not working and what the user must to do make it work. Anything between those extremes, I decide on a case-by-case basis, being influenced also by what else is there and does work.
chrismorgan 6y ago
A link that has a noop href should not be a link. Either give it a meaningful href if that’s possible, or realise that it’s actually a button in disguise, and so turn it into a button. Yes, I am saying that you should never use <a href="javascript:void 0"> or similar. (<a href="#"> is illegitimate in most cases, but is occasionally used honestly to cause scrolling to the top of the page.)
- webstrand 6y ago
  I use them with progressive enhancement, so if javascript is available, then a dynamically generated href is added. Otherwise, I prefer non-functional links, because hiding the links often affects layout and can be confusing. If the link is visible, but not working, it's obvious that there's an issue with the application. If the link is hidden, it's not really clear why its missing. (Did the site change? am I on the wrong page? etc) Buttons aren't perfect, either, you have to write additional code to handle middle-click actions, and the right-click menu doesn't contain the expected "Open in New Tab" or "Copy Link Location".

ximm 6y ago

Can you give an example on when you would need a link that does not link anywhere? The only cases I can think of are better served by `<button type="button">`.

webstrand 6y ago
I use them for progressive enhancement. If javascript is available, I'll add a dynamically generated href, or call .addEventListener("click", ...) and add behaviour to the link. Buttons can be used sometimes, but if you're wanting something that behaves like a link: middle click works, right click "Open in new Tab", Copy link, etc. then a button doesn't work. I prefer to use buttons to affect the state of the current page. And use anchor tags for all other navigation, even if I'm handling it with .addEventListener("click", ...). I suppose I could just hide the non-functional links, or add them dynamically with javascript. But that could affect layout.
- chrismorgan 6y ago
  If it’s not going to work if JavaScript is unavailable, I would suggest either adding it dynamically with JavaScript, or else omitting the href attribute so that it’s not a link; this could be paired with hiding it, or just giving it attributes like title="JavaScript is required for this link to work" and style="cursor: not-allowed". (Maybe aria-hidden="true" too.)
  - webstrand 6y ago
    That's a reasonable option, I'll have to try that. My only concern is that when an anchor tag has no href attribute, the styling is different. It usually behaves as plain text, if I remember correctly, which is really confusing if you expected a link. Nothing that styling can't fix, but that's why, historically, I have always tried provide an href tag, even if it's just href="javascript:void 0". Still, your solution is nicer in many ways, thanks.
    - chrismorgan 6y ago
      My point is that it semantically isn’t a link until the JavaScript executes (if it ever does). A link is something you can click on and it does something. But yeah, stylesheets might need adjustment for best results if you want to keep it on-screen even when it’s not operative, e.g. add a class link-needs-js which you style along with your :link, :visited. In the hidden versus disabled thing, I do approximately this, if I have functionality that can’t work without JS (for whatever reason): if it’s completely optional, I hide it; if it’s important, I show it with a disabled style including not-allowed cursor (the disabled attribute if it’s a button, or a class if it’s an anchor) and some kind of “JS required” title, to at least give a hint as to why it’s not working and what the user must to do make it work. Anything between those extremes, I decide on a case-by-case basis, being influenced also by what else is there and does work.

chrismorgan 6y ago

A link that has a noop href should not be a link. Either give it a meaningful href if that’s possible, or realise that it’s actually a button in disguise, and so turn it into a button. Yes, I am saying that you should never use <a href="javascript:void 0"> or similar. (<a href="#"> is illegitimate in most cases, but is occasionally used honestly to cause scrolling to the top of the page.)

webstrand 6y ago
I use them with progressive enhancement, so if javascript is available, then a dynamically generated href is added. Otherwise, I prefer non-functional links, because hiding the links often affects layout and can be confusing. If the link is visible, but not working, it's obvious that there's an issue with the application. If the link is hidden, it's not really clear why its missing. (Did the site change? am I on the wrong page? etc) Buttons aren't perfect, either, you have to write additional code to handle middle-click actions, and the right-click menu doesn't contain the expected "Open in New Tab" or "Copy Link Location".