current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

This question already has an answer here:

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?

share|improve this question

marked as duplicate by Juhana, Doorknob, Alexey Lebedev, Blowsie, cryptic ツ Apr 15 '13 at 14:37

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
3  
Counterquestion: I see no reasons to put an empty link onto a page? –  Christoph Apr 15 '13 at 12:29
6  
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. –  Juhana 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

4 Answers 4

up vote 2 down vote accepted

A Jquery solution..

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

<a href="#" class="preventDefault">Method 1</a>
share|improve this answer
    
return false also prevents bubbling. Not the best idea. –  Alexey Lebedev Apr 15 '13 at 12:33
    
@AlexeyLebedev Sure, but putting clickable elements inside <a> elements isn't a great idea either –  Blowsie Apr 15 '13 at 12:36
up vote 5 down vote

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 */
}
share|improve this answer
3  
I would add cursor: pointer; to the css. –  Ragnagord 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"? –  Doorknob 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
2  
It's impossible to interact with spans using the keyboard alone, this solution is not accessibility friendly. –  David McMullin Apr 15 '13 at 14:02
up vote 0 down vote

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.

share|improve this answer
    
Please avoid link-only answers. –  ruakh May 20 '14 at 5:10
up vote 2 down vote

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

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.