Which href value should i use for javascript links or javascriptvoid0

在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和渐进式增强_（均来自维基百科）。

做<a href="#" onclick="myJsFunc();">Link</a>或<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>做任何其他包含某个onclick属性的事情 - 五年前还可以，但现在可能是一种不好的做法。原因如下：

1. 它促进了强制性 JavaScript 的实践——事实证明，这种做法难以维护且难以扩展。有关此内容的更多信息，请参阅_Unobtrusive JavaScript_。

2. 您花费时间编写极其冗长的代码 - 这对您的代码库几乎没有（如果有的话）好处。

3. 现在有更好、更简单、更可维护和可扩展的方法来实现所需的结果。

不引人注目的 JavaScript 方式

就是根本没有href属性！任何好的 CSS 重置都会解决缺少的默认光标样式，因此这不是问题。然后使用优雅且不引人注目的最佳实践附加您的 JavaScript 功能 - 由于您的 JavaScript 逻辑保留在 JavaScript 中而不是标记中，因此更易于维护 - 当您开始开发需要将逻辑拆分为的大规模 JavaScript 应用程序时，这一点至关重要黑盒组件和模板。有关此内容的更多信息，请参阅_大规模 JavaScript 应用程序架构_

简单的代码示例

shell
// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

运行代码片段Hide results

展开片段

黑盒_Backbone.js_示例

有关可扩展、黑盒化的 Backbone.js 组件示例 -请参阅此处的工作 jsfiddle 示例。请注意我们如何利用不显眼的 JavaScript 实践，并在少量代码中拥有一个可以在页面上重复多次的组件，而不会产生副作用或不同组件实例之间发生冲突。惊人的！

笔记

• 省略元素href上的属性a将导致无法使用tab按键导航访问该元素。如果您希望通过键访问这些元素tab，您可以设置tabindex属性，或改用button元素。您可以轻松地设置按钮元素的样式，使其看起来像_Tracker1 的回答_中提到的普通链接。

• 省略元素href上的属性a将导致Internet Explorer 6和Internet Explorer 7不采用样式a:hover，这就是为什么我们添加了一个简单的 JavaScript shim 来完成此操作a.hover。这是完全可以的，就好像您没有 href 属性并且没有优雅的降级一样，那么您的链接将无法正常工作 - 并且您将有更大的问题需要担心。

• 如果您希望您的操作在禁用 JavaScript 的情况下仍然有效，那么可以使用一个a带有属性的元素href，该属性会转到某个 URL，该 URL 将手动执行该操作，而不是通过 Ajax 请求或其他任何方式。如果您这样做，那么您需要确保执行event.preventDefault()单击调用，以确保单击按钮时它不会跟随链接。此选项称为优雅降级。

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

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

老实说，我两者都不建议。我会使用一种程式化的方式<button></button>来表现这种行为。

shell
button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

运行代码片段Hide results

展开片段

这样你就可以分配你的 onclick。我还建议通过脚本进行绑定，而不是使用onclick元素标签上的属性。唯一的问题是旧版 IE 中的伪 3D 文本效果无法禁用。

---

如果您_必须_使用 A 元素，请javascript:void(0);出于已经提到的原因使用。

• 如果您的 onclick 事件失败，将始终拦截。
• 不会发生错误的加载调用，或基于哈希更改触发其他事件
• 如果点击失败（onclick 抛出），井号标签可能会导致意外行为，请避免这种情况，除非它是适当的失败行为，并且您想要更改导航历史记录。

注意：您可以将 替换0为字符串，例如javascript:void('Delete record 123')，它可以作为额外的指示符，显示单击实际执行的操作。