Is there a better way to 'fake' the href attribute for links?

Question

Right now I use:

href="javascript:void(0)"

for my a tags.

However, I find this messy, and it is also displayed to the user in FireFox on a hover.

What I'm considering doing is replacing my links with just plain p tags and setting up event handlers in JavaScript.

Clarification:

This is for modern JavaScript enabled browsers only. I'm not yet currently concerned accessibility.

And what about keyboard accessibility? Not everyone uses a mouse to navigate the page. — epascarello, Mar 15 '13 at 20:39
check out this post http://stackoverflow.com/questions/11144653/a-script-links-without-href?rq=1 — Agustin Meriles, Mar 15 '13 at 20:41
Are you trying to cause the cursor to change? You can do this with CSS: `cursor: pointer` — Kyle, Mar 15 '13 at 20:41
sounds obvious to you guys maybe but, why would one create a link to not be used as a link? — Sebas, Mar 15 '13 at 20:41
well explaining post (duplicate)[http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0][1] [1]: http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 — ncubica, Mar 15 '13 at 20:43
possible duplicate of [How to disable HTML links](http://stackoverflow.com/questions/10276133/how-to-disable-html-links) — Sebas, Mar 15 '13 at 20:56
@Sebas - What I ended up doing, but it was a process of conversion ... — , May 03 '13 at 16:02

AlienWebguy · Answer 1 · 2013-03-15T20:59:19.427

2

HTML:

<a href="">Foo</a>

JS:

var a = document.getElementsByTagName('a');
for(i=0 ; i<a.length ; i++){
    a[i].addEventListener('click', function(e) {
        if (this.href === window.location.href) {
            e.preventDefault();
        }
    });
}

Demo: http://jsfiddle.net/pqNfg/

edited Mar 15 '13 at 20:59

answered Mar 15 '13 at 20:40

AlienWebguy

76,997
17
122
145

1

I like this version because it keeps clutter out of the DOM and keeps the logic in a script – Maverick Mar 15 '13 at 21:09
your picture scares me. I'm going to practice that face for when I walk down dark alleys. – Mar 19 '13 at 18:37
That's Jean-Claude Van Damme from Bloodsport at the end when he's making Chun Li say "Mateeeeeeeeee!!!!!" – AlienWebguy Mar 19 '13 at 20:32
iOS VoiceOver has a nasty habit of reading out links whose href is empty as `visited` – Corey Sep 15 '20 at 20:22

score 2 · Accepted Answer · answered Mar 15 '13 at 20:40

2

Not sure what you are trying to do, but you can also use href="#" and use unobtrusive javascript to stop the click event from continuing.

answered Mar 15 '13 at 20:40

ryanulit

4,983
6
42
66

2

It's an empty hash, but it'll pop the browser up to the top of the window if you don't manage the event. – AlienWebguy Mar 15 '13 at 20:42
Wiki reference: http://en.wikipedia.org/wiki/Fragment_identifier or see RFC 3986 – Patrick M Mar 15 '13 at 20:44
This is the simplest solution. – Mar 15 '13 at 20:53
I noticed that the # now displays in the url. – Mar 15 '13 at 21:00

score 1 · Answer 3 · answered Mar 15 '13 at 20:48

1

use

event.preventDefault() to disable any links that might be initiated by a user clicks

anchorElement.onclick=function(e)
{
    e.preventDefault();}

answered Mar 15 '13 at 20:48

spaceman12

1,039
11
18

Is there a better way to 'fake' the href attribute for links?

3 Answers3