href="javascript:" 与 href="javascript:void(0)"
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3666683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
href="javascript:" vs. href="javascript:void(0)"
提问by Mic
Our web app is rendered totally on the browser.
The server only talks to the browser through JSON messaging.
我们的 Web 应用程序完全在浏览器上呈现。
服务器仅通过 JSON 消息与浏览器对话。
As a result, we only need a single page for the app and mostly all the <a>tags do not have a real hrefpointing to other pages.
因此,我们只需要应用程序的单个页面,并且大多数<a>标签都没有真正href指向其他页面。
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:
在我寻求删除不必要的东西时,我想知道我是否可以摆脱void(0)我们代码中的无数,因为它们似乎没用:
<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...
有谁知道使用是否href="javascript:"会导致问题?
它甚至适用于 IE7...
Please don't spend your valuable time to tell me inline javascript is bad, as this is generated by a template engine :)
请不要花宝贵的时间告诉我内联 javascript 不好,因为这是由模板引擎生成的 :)
采纳答案by balexandre
It does not cause problems but it's a trick to do the same as PreventDefault
它不会引起问题,但它是一个技巧,做与 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);
你会跳到顶部,URL 也会有锚点#,为了避免这种情况,我们简单地return false;或使用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 {text-decoration:underline;},你就会有“类似链接”
<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 functionat the end, just return false;to prevent the default behavior, you don't need to do anything more.
没关系,但function最后,只是return false;为了防止默认行为,您不需要再做任何事情。
回答by Andy E
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 voidoperator 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:在导航中使用时,执行脚本的返回值,如果有,则成为新文档的内容,显示在浏览器中。voidJavaScript 中的运算符会导致其后的表达式的返回值返回undefined,从而阻止此操作发生。你可以自己试试,复制以下内容到地址栏,按回车:
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:undefined;
javascript:void 0;
javascript:
With the exception that undefinedcan be overridden by declaring a variable with the same name. Use of void 0is generally pointless, and it's basically been whittled down from void functionThatReturnsSomething().
除了undefined可以通过声明具有相同名称的变量来覆盖。的使用void 0通常毫无意义,它基本上是从void functionThatReturnsSomething().
As others have mentioned, it's better still to use return false;in the click handler than use the javascript:protocol.
正如其他人所提到的,return false;在点击处理程序中使用比使用javascript:协议更好。
回答by brookslee
Using 'javascript:void 0' will do cause problem in IE
使用 'javascript:void 0' 会导致 IE 出现问题
when you click the link, it will trigger onbeforeunloadevent of window !
当你点击链接时,它会触发窗口的onbeforeunload事件!
<!doctype html>
<html>
<head>
</head>
<body>
<a href="javascript:void(0);" >Click me!</a>
<script>
window.onbeforeunload = function() {
alert( 'oops!' );
};
</script>
</body>
</html>
回答by Tanguy
This method seems ok in all browsers, if you set the onclick with a jQuery event:
如果您使用 jQuery 事件设置 onclick,则此方法在所有浏览器中似乎都可以:
<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.
如前所述,如果您使用历史记录(或 ba-bbq)JS 插件,href="#" 会更改 url 哈希值并触发数据重新/加载。
回答by Moin Zaman
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.
然后,您需要添加return false;到任何被称为 onclick 锚点的函数的末尾,以免页面跳到顶部。
回答by RiccardoC
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
我通常不使用任何 href 并使用 css 更改方面,使它们看起来像是链接。因此,除了应用程序的事件处理程序之外,您根本不必担心链接效果
a {
text-recoration: underline;
cursor: pointer;
}
回答by Kishore
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.
javascript:void(0); --> 这将执行 void 函数并返回 undefined。这可能与 IE 有问题。javascript:; --> 这没有任何作用。创建死链接最安全。'#' --> 这意味着指向相同的 DOM,它会在点击时重新加载页面。
回答by Peter Bridger
Why have all the click events as a hreflinks?
为什么所有的点击事件都作为a href链接?
If instead you use spantagswith :hoverCSS and the appropriate onclick events, this will get around the issue completely.
相反,如果您使用span带有:hoverCSS 的标签和适当的 onclick 事件,这将完全解决问题。

