最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - HREF link that targets nothing, does not want to use hash or void(0) - Stack Overflow

programmeradmin10浏览0评论

I have a link that I want to be able to click to trigger a piece of jQuery code.

Currently I have

<a href="#" id="foo">Link</a>

and

$('#foo').click(function(){
  // Do stuff
});

which works well. But, I have always hated using hash in this way. The page flickers and the hash is added to the page url.

One alternative is to use

<a href="javascript:void(0);" id="foo">Link</a>

but I also dislike seeing that piece of code in the browser status bar. It looks tacky.


What I'd rather have is an explanatory javascript placeholder that does nothing, like

<a href="javascript:zoom();" id="foo">Link</a>

which actually works, but throws an ReferenceError in the javascript console since there are no such function. What's the minimum definition of a function that does nothing?

Are there any other alternatives?

Should I just skip the link and use something like

<span id="foo" style="cursor:pointer;cursor:hand;">Link</span>

instead?

I have a link that I want to be able to click to trigger a piece of jQuery code.

Currently I have

<a href="#" id="foo">Link</a>

and

$('#foo').click(function(){
  // Do stuff
});

which works well. But, I have always hated using hash in this way. The page flickers and the hash is added to the page url.

One alternative is to use

<a href="javascript:void(0);" id="foo">Link</a>

but I also dislike seeing that piece of code in the browser status bar. It looks tacky.


What I'd rather have is an explanatory javascript placeholder that does nothing, like

<a href="javascript:zoom();" id="foo">Link</a>

which actually works, but throws an ReferenceError in the javascript console since there are no such function. What's the minimum definition of a function that does nothing?

Are there any other alternatives?

Should I just skip the link and use something like

<span id="foo" style="cursor:pointer;cursor:hand;">Link</span>

instead?

Share Improve this question asked Jun 29, 2011 at 0:16 MattisMattis 5,0963 gold badges36 silver badges53 bronze badges 8
  • 3 For accessibility reasons, I wouldn't remend using a span that's styled like an anchor. – ScottE Commented Jun 29, 2011 at 0:22
  • 2 You probably want to use <a href="#zoom"> bined with @patrick dw's answer. – thirtydot Commented Jun 29, 2011 at 0:24
  • @thirtydot That's it! Spot on. – Mattis Commented Jun 29, 2011 at 0:32
  • 1 Screenreaders for blind users won't know that a visually styled span is supposed to be a link. – Eevee Commented Jun 29, 2011 at 0:39
  • 2 @Eevee - screen readers will also be confused with links that aren't links. The appropriate UI ponent is a button, then both sighted and unsighted visitors will know that it isn't a link before they click on it. – RobG Commented Jun 29, 2011 at 2:36
 |  Show 3 more ments

4 Answers 4

Reset to default 17

Use the event.preventDefault()[docs] method.

$('#foo').click(function(e){

   e.preventDefault();
  // Do stuff
});

This will prevent the hash from having any effect when you click. Or get rid of the hash, and use CSS to style it.

Also, you can provide an actual url for the href to handle graceful degradation.


What's the minimum definition of a function that does nothing?

Here's a no-op function:

var noop = function(){};

...or since you're using jQuery, you can use the jQuery.noop()[docs] method, which also is just an empty function.

$.noop

Ideally, the link should link to a page that replicates the JavaScript functionality for users without JS enabled. Then preventDefault would prevent the actual navigation, as the other answers have indicated.

If that doesn't make sense in this case, note that the href attribute is optional. You can just leave it off entirely.

This is an inappropriate use of a link, you should be using a button or some other element that indicates that clicking will make something happen but not navigation.

You can use preventDefault, for instance:

$('#foo').click(function(e){
    // Do stuff
    e.preventDefault();
});
发布评论

评论列表(0)

  1. 暂无评论