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 :)
This question is related to
javascript
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.
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.
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.
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>
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.
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.
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;
}
Source: Stackoverflow.com