应该使用 javascript 链接或 javascriptvoid0 使用哪个 href 值？

在Web前端开发中，<a>元素的href属性用于定义超链接的目的地。href的值可以是多种类型，比如URL、书签或者是JavaScript伪协议。`"#"和"javascript:void(0)"都是在某些情况下用来创建一个点击不会导致页面跳转的链接的方法。

当你使用"#"（锚点）时，它会创建一个指向页面中相同ID的元素的书签链接。如果这个ID不存在，它将会导致页面滚动到顶部。如果只是单纯的"#"，没有跟随具体的ID，那么点击链接通常会导致页面滚动到顶部，并且URL会更新（添加一个#`在URL末尾）。

当你使用"javascript:void(0)"时，它会执行一个空的JavaScript语句，该语句不会有任何效果，并且页面不会有任何滚动或者URL的变化。这种方法通常用于那些想要附加JavaScript事件监听器以执行某些动作但不希望更改URL或者页面位置的场景。

使用场景对比：

• 使用"#"：

  • 当你想创建一个真正的书签/锚点，例如页面内导航。
  • 如果你不介意URL变化（URL末尾会添加一个#）。
  • 如果你想通过CSS选择器或者JavaScript感知到URL的改变。

• 使用"javascript:void(0)"：

  • 如果你不想要URL发生变化。
  • 当你想防止页面滚动到顶部。
  • 当你使用JavaScript来处理点击事件，并且不需要锚点导航的功能。

例子：

1. 使用"#"进行页面内导航：

html
<!-- 定义锚点 -->
<h2 id="section1">Section 1</h2>
...

<!-- 创建到该锚点的链接 -->
<a href="#section1">Go to Section 1</a>

1. 使用"javascript:void(0)"附加事件监听器：

html
<a href="javascript:void(0)" onclick="doSomething();">Click me</a>

<script>
function doSomething() {
    // 执行一些动作，但不改变URL，也不会滚动页面
    alert('Action performed!');
}
</script>

最佳实践：

在现代Web开发中，推荐使用更加语义化的方法，避免使用"javascript:void(0)"，因为它将逻辑（JavaScript代码）与标记（HTML）混合在了一起。更好的做法是使用事件监听器来处理用户的点击事件：

html
<a href="#" id="clickableElement">Click me</a>

<script>
document.getElementById('clickableElement').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为，即不跳转
    doSomething();
});
</script>

这样的方式保持了HTML的清洁和JavaScript的可维护性，同时event.preventDefault()确保了即使使用了"#"，页面也不会滚动到顶部。这在提升用户体验和网站可维护性方面都是比较好的实践。

我用javascript:void(0)。

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

shell
function doSomething() {
    //Some code
    return false;
}

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

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

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

shell
onclick="someFunc.call(this)"

或者

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

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

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

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

或者

使用href="javascript:void(0)"

第二个显然更容易沟通。

两者都不。

如果您有一个有意义的实际 URL，请将其用作 HREF。如果有人在您的链接上单击鼠标中键以打开新选项卡或者禁用了 JavaScript，则 onclick 不会触发。

如果这是不可能的，那么您至少应该使用 JavaScript 和适当的单击事件处理程序将锚标记注入到文档中。

我意识到这并不总是可能的，但在我看来，在开发任何公共网站时都应该努力做到这一点。

查看_Unobtrusive JavaScript和渐进式增强_（均来自维基百科）。

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

javascript:;也表现得像javascript:void(0);