javascript - Empty-linked anchor

Question

I have an anchor that doesn't go anywhere but has an onclick (e.g. <a onclick="..."></a>). My question pertains to the href attribute. What should I put for the value?

If I simply omit href, the anchor doesn't have the appropriate decoration--the mouse pointer icon doesn't change when the mouse is put over it.

If I use href="#", then the window scrolls to the top of the page when the link is clicked.

If I use href="javascript:..." and put the value of onclick proceeding javascript:, the page is left and the address bar contains the Javascript when the link is clicked.

When I refer to browser behavior, I'm referring to Chrome, which I'm testing it in to start with.

What should I be putting for href when the anchor isn't an actual link but exists only to have the onclick perform behavior?

Answer 1

Ideally you would have an option for those with Javascript disabled:

<a href="degrade_option.html" onclick="return fancy_option();">do the option!</a>

If you're not into that sort of thing, although you really should be, the most common way is to use the pound but then cancel the event to prevent the default action from happening, like so:

<a href="#" onclick="return do_something();">do something</a>

But then you have to make sure do_something returns false. (or you can just add return false; at the end of the click handler, but this gets even more unsightly fast)

Although, to be honest, you really shouldn't have inline Javascript attributes to begin with. They are bad practice, a nightmare to maintain, and there are much better alternatives out there.

EDIT: In response to your comment, the alternative is unobtrusive javascript:

"Unobtrusive JavaScript" is an emerging technique in the JavaScript programming language, as used on the World Wide Web. Though the term is not formally defined, its basic principles are generally understood to include:

• Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation
• Best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability)
• Progressive enhancement to support user agents that may not support advanced JavaScript functionality

Read the page for some examples.

Answer 2

In your onclick handler, add this to the end:

return false;

This will cancel the default processing (i.e. following the link) and you can put whatever you want in the href (the # is as good as any).

Answer 3

<a href="javascript:void(0);" onclick="...">txt</a>

Answer 4

如果不使用，我更喜欢删除 href（根据 W3C 规范，它不是必需的）。要获得预期的鼠标光标，请使用 CSS！

<style type="text/css">
a { cursor: pointer; }
</style>
<a onclick="go();">link</a>

Answer 5

有两种方法可以做到这一点，如果链接的 id 标签是link，你可以href="#"在你的 HTML 中使用，然后在你的 JavaScript 中有：

$('#link').click(function(evt) {
 // code goes here
 evt.preventDefault();
});

这会阻止浏览器的正常行为。或者

$('#link').click(function(evt) {
 // code goes here
 return false;
});

Answer 6

<a href="javascript:;">Foo</a>

简短、具有描述性且不会像 # 那样跳跃。