href ="",href ="#"和href ="javascript:void(0)"之间有什么区别？

Question

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

Answer 1

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

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

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

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

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

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

这样,既然你正在使用#,即使用户禁用了javascript,页面也不会重新加载(它只会滚动到顶部),我认为它看起来比javascript: void(0)

Answer 2

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

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

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

return doSomething()但后来他们忘记在 the 中使用onclick而只是使用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)"

第二个显然更容易沟通。