4

I've seen (and used) code to have a link spawn a javascript action many times in my life, but I've never come to a firm conclusion on if the href attribute should be blank or #. Do you have any preference one way or the other, and if so, why?

<a href="" onclick="javascript: DoSomething();">linky</a>

or

<a href="#" onclick="javascript: DoSomething();">linky</a>
Matt Dawdy
  • 19,247
  • 18
  • 66
  • 91

5 Answers5

9

You must have something for the href attribute, otherwise the browser will not treat it as a link (for example, making it focusable or giving it an underline) - that's why the use of "#" has become prevalent.

Also, the contents of the event attributes (onclick, onmouseover, on...) are already treated as javascript: you don't need to preface it with javascript:

So given your example, the best way to do that inline (which itself is not the best way, probably), is like this:

<a href="#" onclick="DoSomething(); return false">linky</a>
nickf
  • 537,072
  • 198
  • 649
  • 721
  • So, the short and easy answer is to have return false on the onclick handlers. Thanks. I'll still investigate the other stuff (like adding onclick via JS and having a default "No JS" page, but this really helps. Thanks. – Matt Dawdy Dec 02 '08 at 20:05
  • no worries. The "return false" part stops the browser from navigating to the specified href (if it's #, that's the top of the page). – nickf Dec 02 '08 at 23:28
6

Checkout the discussion over at Href for Javascript links: “#” or “javascript:void(0)”?.

Also, leaving href blank causes the browser to not use the pointer cursor when the user mouses over, though you can fix that with CSS.

Community
  • 1
  • 1
sblundy
  • 60,628
  • 22
  • 121
  • 123
1

I always use # as having javascript: inside of html attributes seems to generally be considered as bad practise they days.

So saying that, you should try and refrain from using onclick= attributes and use javascript listeners in external .js files instead.

For example you using jQuery..

$(".link").click(function(e) {
    e.preventDefault();
    DoSomething();
});
adam
  • 22,404
  • 20
  • 87
  • 119
  • Nah, no hate - just loathing. :) Don't get me wrong, jQuery kicks butt. I just hate that people see jQuery as a hammer and every JavaScript question as a nail. This is a good example, because the OP doesn't really even have a problem that needs jQuery as the solution, yet someone suggests it. Argh! – Jason Bunting Dec 02 '08 at 16:17
  • Jason -- you are completely right. This has happened to me here before, too. I wonder if some people who use jQuery understand why it works...they might think without jQuery you can't add event handlers... I'm not saying Adam is like that, just more of a general observation. – Matt Dawdy Dec 02 '08 at 16:48
0

Why not have the href point to a page explaining they have JavaScript turned off and they need to turn it on to get the missing functionality ?

Since the link will only be followed when they have javascript turned off, let it be something informative!

Also remember people sometimes middle click on such links and the OnClick event does not fire, so if you can get them a page that works without the need for javascript it would be ideal.

Pat
  • 36,282
  • 18
  • 72
  • 87
0

In cases like this, where you intend not to provide a non-javascript option, I prefer:

<a href="javascript:// open xxx widget" onclick="DoSomething();">linky</a>

This way you can at least provide a plan text description as the JavaScript comment.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176