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

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
– Christoph, Commented Apr 15, 2013 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
– Felix Kling, Commented Apr 15, 2013 at 12:30
As long as the event calls preventDefault() or returns false, href="#" doesn't change the browser URL. — JJJ
– JJJ, Commented Apr 15, 2013 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
– bytecode77, Commented Apr 15, 2013 at 12:52

tckmn · Accepted Answer · 2013-04-15 12:54:58Z

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, 2013 at 12:54

answered Apr 15, 2013 at 12:32

tckmn

59.7k27 gold badges118 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JimmyMcHoover Over a year ago

I would add cursor: pointer; to the css.

bytecode77 Over a year ago

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.

tckmn Over a year ago

@DevilsChild What do you mean by "touch-friendly"?

bytecode77 Over a year ago

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.

Frances McMullin Over a year ago

It's impossible to interact with spans using the keyboard alone, this solution is not accessibility friendly.

Blowsie · Accepted Answer · 2013-04-15 12:31:02Z

3

A Jquery solution..

$('a.preventDefault').click(function(){ return false }); <a href="#" class="preventDefault">Method 1</a>

answered Apr 15, 2013 at 12:31

Blowsie

40.7k15 gold badges92 silver badges110 bronze badges

2 Comments

Alexey Lebedev Over a year ago

return false also prevents bubbling. Not the best idea.

Blowsie Over a year ago

@AlexeyLebedev Sure, but putting clickable elements inside <a> elements isn't a great idea either

CaptainCarl · Accepted Answer · 2013-04-15 12:29:53Z

2

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

answered Apr 15, 2013 at 12:29

CaptainCarl

3,4996 gold badges42 silver badges75 bronze badges

Comments

sevenseacat · Accepted Answer · 2013-04-15 12:32:06Z

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.

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

1 Comment

Linked

Related