href="javascript:" vs. href="javascript:void(0)"
Our web app is rendered totally on the bro开发者_如何学编程wser.
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?
Please don't spend your valuable time to tell me inline javascript is bad, as this is generated by a template engine :)
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.
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.
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>
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.
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.
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;
}
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.
加载中,请稍侯......
精彩评论