Best practice for empty javascript event (e.g. onclick="javascript:;")

Question

If you want an event or a link to an empty javascript call, there are several ways, of which I can think of:

<a href="#">Method 1</a>                    <- Ugh... changes URL in browser
<a href="javascript:;">Method 1</a>         <- My currently preferred method
<a href="javascript:void(0);">Method 1</a>  <- Another approach?

What is the best way in terms of cross-browser compatibility and shortness?

Counterquestion: I see no reasons to put an empty link onto a page? — Christoph, Apr 15 '13 at 12:29
Links should... link to something. Even though it seems to be common to add event listeners to links, if it doesn't link to a fallback page if JavaScript is disabled., you should rather use buttons. — Felix Kling, Apr 15 '13 at 12:30
As long as the event calls `preventDefault()` or returns false, `href="#"` doesn't change the browser URL. — JJJ, Apr 15 '13 at 12:32
Sometimes I must use this. For instance, I have a clickable h2 that expands a container. I have to add an `a` tag around it for touch optimization. — bytecode77, Apr 15 '13 at 12:52

tckmn · Answer 1 · 2013-04-15T12:54:58.483

6

Don't use links if they don't... well, link to anything.

Instead, use a span somewhat like this:

<span class="spanlink" onclick=something>This is some text</span>

And in your CSS:

.spanlink {
    text-decoration: underline;
    color: blue;
    cursor: pointer; /* Ragnagord's suggestion in comments */
}

edited Apr 15 '13 at 12:54

answered Apr 15 '13 at 12:32

tckmn

57,719
27
114
156

3

I would add `cursor: pointer;` to the css. – JimmyMcHoover Apr 15 '13 at 12:48
This is not touch-friendly at all. That's the main reason I put links on everything clickable, even if they're not linking to another page. – bytecode77 Apr 15 '13 at 12:53
@DevilsChild What do you mean by "touch-friendly"? – tckmn Apr 15 '13 at 13:00
1

When you use a span and touch on it on a touch input device, your finger will select parts of the text, while it doesn't when using a link. Also, IE 10 highlights touched links, not touched spans. – bytecode77 Apr 15 '13 at 13:06
4

It's impossible to interact with spans using the keyboard alone, this solution is not accessibility friendly. – Frances McMullin Apr 15 '13 at 14:02

score 3 · Accepted Answer · answered Apr 15 '13 at 12:31

3

A Jquery solution..

$('a.preventDefault').click(function(){
 return false
});

<a href="#" class="preventDefault">Method 1</a>

answered Apr 15 '13 at 12:31

Blowsie

40,239
15
88
108

`return false` also prevents bubbling. Not the best idea. – Alexey Lebedev Apr 15 '13 at 12:33
@AlexeyLebedev Sure, but putting clickable elements inside `` elements isn't a great idea either – Blowsie Apr 15 '13 at 12:36

score 2 · Answer 3 · answered Apr 15 '13 at 12:29

2

How about button? I never use anchors if they're not leading anywhere

answered Apr 15 '13 at 12:29

CaptainCarl

3,411
6
38
71

score 0 · Answer 4 · answered Apr 15 '13 at 12:32

0

Using unobtrusive Javascript.

Also, if a link doesn't do anything without Javascript, then a user without Javascript shouldn't even be able to see the link. Add in the link via Javascript.

answered Apr 15 '13 at 12:32

sevenseacat

24,699
6
63
88

Please avoid [link-only answers](http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers). – ruakh May 20 '14 at 05:10

Best practice for empty javascript event (e.g. onclick="javascript:;")

4 Answers4