href=""、href="#" 和 href="javascript:void(0)" 有什么区别？答案

【问题标题】：What is the difference between href="", href="#" and href="javascript:void(0)"?href=""、href="#" 和 href="javascript:void(0)" 有什么区别？
【发布时间】：2011-10-21 14:04:14
【问题描述】：

href=""、href="#" 和 href="javascript:void(0)" 有什么区别？
它们有什么不同的用途，什么时候比另一种更好？

【问题讨论】：

标签： html href

【解决方案1】：

'#' 会将用户带回到页面顶部，所以我通常使用void(0)。

三个原因。鼓励在开发团队中使用 # 不可避免地会导致一些人使用这样调用的函数的返回值：

function doSomething() {
    //some code
    return false;
}

但后来他们忘记在onclick 中使用return doSomething()，而只使用doSomething()。

避免#的第二个原因是最终返回false；如果被调用的函数抛出错误，则不会执行。因此，开发人员还必须记住在被调用函数中适当地处理任何错误。

第三个原因是存在动态分配 onclick 事件属性的情况。我更喜欢能够调用函数或动态分配它，而不必专门为一种或另一种连接方法编写函数。因此，我在 HTML 标记中的 onclick（或任何内容）看起来像这样：

onclick="someFunc.call(this)"

或

onclick="someFunc.apply(this, arguments)"

使用javascript:void(0) 可以避免上述所有问题，而且我还没有发现任何不利的例子。

因此，如果您是一个单独的开发人员，那么您显然可以做出自己的选择，但如果您作为一个团队工作，您必须声明：

use href="#"，确保onclick 始终在末尾包含return false;，任何被调用的函数都不会引发错误，并且如果您将函数动态附加到 onclick 属性，请确保不会引发错误错误返回false。

或

use href="javascript:void(0)"

第二个显然更容易沟通。

【讨论】：

【解决方案2】：

href="" 将链接到与您当前所在的页面相同的页面，从而有效地刷新页面。 href="#" 不会刷新页面，但使用 # 将使屏幕移动到页面顶部（它是浏览器有效地寻找没有名称的锚点，）。 javascript:void(0) 将完全防止链接上发生任何事情。

当我想插入链接但我不确定它们的去向时，我会使用 #，例如在创建页面布局时。如果我想将表单发布到同一页面，我通常使用表单 action=""，但我从未亲自使用过 href="" 或 javascript:void(0)。

【讨论】：

【解决方案3】：

href="" 将重新加载当前页面

href="#" 会将当前页面滚动到顶部

`href="javascript: void(0)" 什么都不做。

您也可以通过使用其他两种方法中的任何一种从锚点的单击事件处理程序返回 false 来获得与 javascript: void(0) 相同的效果。

我更喜欢使用 <a id="the-link" href="#">Link</a>，然后将事件处理程序绑定到我的 javascript 中某处的单击侦听器，例如：

document.getElementById('the-link').onclick = function(){ 
    // Do stuff
    return false;
};

这样，由于您使用的是#，即使用户禁用了 javascript，页面也不会重新加载（它只会滚动到顶部），而且我认为它比javascript: void(0) 看起来更干净

【讨论】：

您确定href="" 重新加载当前页面吗？这不会发生在我身上。

【解决方案4】：

如果你使用href=""，一些浏览器可能会认为锚标签不是链接，而是锚。然后它不会得到链接的行为和事件。即使它在您可以测试的浏览器中工作，也不要使用空值更安全。

经常使用无名书签href="#"。它与链接到任何书签（如href="#contact"）相同，只是无名书签指向页面顶部。如果 Javascript 不起作用，这可以作为一个不错的后备，因为它只会将您带到顶部而不是导航到其他地方。有时您会看到开发人员忘记停止链接的默认操作，并且页面跳转到顶部，而脚本执行它的操作。

使用href="javascript:void(0)" 是一种生成根本不指向任何地方的URL 的方法，因此链接不会被跟踪。它运行良好，但是当您在大多数浏览器中指向链接时，URL 会显示在状态字段中，它看起来并不那么漂亮。

【讨论】：

【解决方案5】：

它们是两个不同的链接：
1. href="" 将用户重定向到根页面。更像是默认页面或索引页面。
2. href="#" 不会重定向用户，也不会做任何事情，只是改变 URL。它只是为了制作一个类似按钮的 URL，我的意思是一个类似按钮的锚点。但无处可去。 3.如果你想用它做一些javascript工作。你可以使用

<button onclick="dothis()">Click me!</button>  
function dothis() {
// do what ever you want to do here
}

第三种不会改变url，不会重定向！

【讨论】：

【解决方案6】：

href 属性定义链接资源的 URL。如果锚标签没有href标签，那么它就不会变成超链接。 href 属性具有以下值：

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use

<a href="javascript:void(0)">Test1</a>

【讨论】：