href="javascript:" vs. href="javascript:void(0)"

Question

Our web app is rendered totally on the browser.
The server only talks to the browser through JSON messaging.

As a result, we only need a single page for the app and mostly all the <a> tags do not have a real href pointing to other pages.

In my quest of removing unnecessary things I was wondering if I can get rid of the zillions of void(0) we have in our code, as they seem useless:

<a onclick="fn()">Does not appear as a link, because there's no href</a>
<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>

Does anybody knows if using href="javascript:" can cause a problem?
It works even on IE7...

Please don't spend your valuable time to tell me inline javascript is bad, as this is generated by a template engine :)

@Second Rikudo, the question you refer to as duplicate was asked a year after this one — Mic, Apr 20 '15 at 08:24
@Mic Apologies, I got to this question from the review queue and didn't notice the date (and more importantly, that this question had better answers). I'll reverse the direction of the duplicate. — Madara's Ghost, Apr 20 '15 at 10:24

score 59 · Accepted Answer · edited Dec 20 '15 at 14:51

59

It does not cause problems but it's a trick to do the same as PreventDefault

when you're way down in the page and an anchor as:

<a href="#" onclick="fn()">click here</a>

you will jump to the top and the URL will have the anchor # as well, to avoid this we simply return false; or use javascript:void(0);

regarding your examples

<a onclick="fn()">Does not appear as a link, because there's no href</a>

just do a {text-decoration:underline;} and you will have "link a-like"

<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>

it's ok, but in your function at the end, just return false; to prevent the default behavior, you don't need to do anything more.

edited Dec 20 '15 at 14:51

Roko C. Buljan

196,159
39
305
313

answered Sep 08 '10 at 10:34

balexandre

73,608
45
233
342

I thought the link didn't work without href, but it works, it is just the default underline and cursor that does not appear. Removing the href altogether could be what I'm looking for. I'll do some check. – Mic Sep 08 '10 at 11:10
4

The link can't be tabbed(and get the focus) without href, too bad. – Mic Sep 08 '10 at 11:19
just put `href="#"` no problem with that if your function returns `false` at the end, so it prevents the link behavior - u can test it here: http://jsbin.com/ipoda3 – balexandre Sep 08 '10 at 12:45
new revision so you can see the behavior when you have scroll bar on the browser: http://jsbin.com/ipoda3/2 – balexandre Sep 08 '10 at 12:53
1

I use already the hash key(#) for the navigation and state in my page. I could use href="#" but then have to add to all my links return false which is not an improvement compared to what I have today. – Mic Sep 08 '10 at 14:50
then you can simple add `$("a").click(function(event) {event.preventDefault();});` – balexandre Sep 08 '10 at 15:04
is it just me, or does firefox only tab-focus-to and only allow the enter button to activate anchor tags that have an href attribute? maybe my implementation just sucks. – activedecay Dec 13 '21 at 22:50

Andy E · Answer 2 · 2012-05-16T13:14:05.427

26

When using javascript: in navigation the return value of the executed script, if there is one, becomes the content of a new document which is displayed in the browser. The void operator in JavaScript causes the return value of the expression following it to return undefined, which prevents this action from happening. You can try it yourself, copy the following into the address bar and press return:

javascript:"hello"

The result is a new page with only the word "hello". Now change it to:

javascript:void "hello"

...nothing happens.

When you write javascript: on its own there's no script being executed, so the result of that script execution is also undefined, so the browser does nothing. This makes the following more or less equivalent:

javascript:undefined;
javascript:void 0;
javascript:

With the exception that undefined can be overridden by declaring a variable with the same name. Use of void 0 is generally pointless, and it's basically been whittled down from void functionThatReturnsSomething().

As others have mentioned, it's better still to use return false; in the click handler than use the javascript: protocol.

edited May 16 '12 at 13:14

answered Sep 08 '10 at 10:46

Andy E

338,112
86
474
445

1

I agree with all this but the last point. The `return false` is as useless as `void(0)` unless you use a real `href` – Mic Sep 08 '10 at 11:00
@Mic: an `` element without a `href` attribute isn't styled as a link by default. An empty `href` attribute results in a relative link to the current path. Without `href`, it might as well be a ``. `#` is used because it doesn't navigate away from the current page, but it will reset the scrolling. `return false` is much more useful than `void 0`. – Andy E Sep 08 '10 at 11:05
2

@Mic: You need `return false;` if you're using `href="#"` otherwise the document scrolling is reset. Of course, if you're using `javascript:` in the link, `return false` would prevent that script from being executed anyway, so in that sense it would be useless. – Andy E Sep 08 '10 at 11:09
2

The problem with attaching event handlers to an anchor with a *real* URL in the `href` field is that in case the user activates the link in another manner (eg. pressing enter while anchor is focused, middle mouse button), even if he has Javascript, the `href` is still followed (expected behavior, of course, but annoying nonetheless) – Yi Jiang Sep 08 '10 at 11:42
1

@YiJ: pressing enter on a link will fire the *onclick* event. Not sure about middle mouse. – Andy E Sep 08 '10 at 11:47
1

@Andy Happened to me on Firefox, for the middle mouse. I was using this method as a fallback for users without Javascript, but then noticed this behavior during testing. The event handler will not fire, and the `href` link will open in a new tab. – Yi Jiang Sep 08 '10 at 12:56
@Andy the javascript:"hello" is ok on FF and Opera, but not chrome/safari. I didn't try IE. – Mic Sep 08 '10 at 15:50
@Mic: `javascript:"hello"` does the same for me in Opera, IE6-8, Chrome and Firefox. In Safari, it does nothing, I'm not sure why. AFAIK, there's no standard that defines the behavior, it's just something the browsers generally agree on - Safari appears to be the exception. – Andy E Sep 08 '10 at 16:13
I run chrome 6 since yesterday, and a lot of things have changed for the dev. For the better in general. It does nothing in chrome 6. – Mic Sep 08 '10 at 16:22
1

@AndyE you know, return false and event capturing works better than expected. – Timo Huovinen May 16 '12 at 14:39

score 12 · Answer 3 · answered Apr 20 '12 at 02:19

12

Using 'javascript:void 0' will do cause problem in IE

when you click the link, it will trigger onbeforeunload event of window !

<!doctype html>
<html>
<head>
</head>
<body>
<a href="javascript:void(0);" >Click me!</a>
<script>
window.onbeforeunload = function() {
    alert( 'oops!' );
};
</script>
</body>
</html>

answered Apr 20 '12 at 02:19

brookslee

195
1
5

Not anymore in IE 11, so that's history now. – ygoe Nov 21 '18 at 22:22

Tanguy · Answer 4 · 2014-03-05T12:18:00.160

9

This method seems ok in all browsers, if you set the onclick with a jQuery event:

<a href="javascript:;">Click me!</a>

As said before, href="#" with change the url hash and can trigger data re/load if you use a History (or ba-bbq) JS plugin.

edited Mar 05 '14 at 12:18

answered Mar 04 '14 at 12:36

Tanguy

2,227
1
18
8

Moin Zaman · Answer 5 · 2010-09-08T17:45:01.093

3

you could make them all #'s.

You would then need to add return false; to the end of any function that is called onclick of the anchor to not have the page jump up to the top.

edited Sep 08 '10 at 17:45

answered Sep 08 '10 at 10:27

Moin Zaman

25,281
6
70
74

2

I use the # key already for navigation and state purpose. It is common in single page web apps. So I can't use # – Mic Sep 08 '10 at 10:50
I wanted to check if there is no trouble removing the void(0). If I use `href="#"` instead, I need to add a `return false` to all the `onclick`. It is not any better I think. – Mic Sep 08 '10 at 16:00

score 2 · Answer 6 · answered Nov 17 '15 at 10:19

2

I usually do not use any href and change the aspect with css, making them seems link. Thus you do not have to worry about link effect at all, except for the event handler of your application

a {
  text-recoration: underline;
  cursor: pointer;
}

answered Nov 17 '15 at 10:19

RiccardoC

876
5
10

score 1 · Answer 7 · answered Dec 05 '18 at 08:00

1

javascript:void(0); --> this executes void function and returns undefined. This could have issues with IE. javascript:; --> this does nothing. safest to create dead links. '#' --> this means pointing to same DOM, it will reload the page on click.

answered Dec 05 '18 at 08:00

Kishore

131
1
3

score 0 · Answer 8 · answered Sep 08 '10 at 10:34

0

Why have all the click events as a href links?

If instead you use span tags with :hover CSS and the appropriate onclick events, this will get around the issue completely.

answered Sep 08 '10 at 10:34

Peter Bridger

9,123
14
57
89

This is quite radical. While it make sense. I don't know... I need A tags for links. ie: for tabbing, a SPAN won't get the focus – Mic Sep 08 '10 at 10:55
1

@Mic If tab focusing is all you worry about, giving the `span` an `tabindex` will allow it to become focusable. – Yi Jiang Sep 08 '10 at 13:09
@ji-jiang Indeed, IE6 likes to stick it's nine year old heel in where ever it can :) – Peter Bridger Sep 08 '10 at 13:42
1

@ji-jiang Being picky, replacing " – Mic Sep 08 '10 at 14:43
1

I dont recommend this. what happened with all the good semantic and best practices for accessibility, a span is a text holder in first place not a LINK or action event, if you want to use another tag instead of you should go absolutely with input type="button" imho. – ncubica Jan 05 '12 at 19:49

href="javascript:" vs. href="javascript:void(0)"

8 Answers8

Linked

Related