问题 我应该将哪个“href”值用于JavaScript链接，“＃”或“javascript：void（0）”？

都不是。

如果您有一个有意义的实际URL，请将其用作HREF。如果有人在您的链接中间点击以打开新标签或者他们禁用了JavaScript，则onclick将不会触发。

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

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

查看 不引人注目的JavaScript 和 渐进式增强 （都是维基百科）。

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

1. 它促进了突兀的JavaScript的实践 - 这已经证明难以维护并且难以扩展。更多相关内容 不引人注目的JavaScript。

2. 你花时间编写令人难以置信的过于冗长的代码 - 这对你的代码库有很小的（如果有的话）好处。

3. 现在有更好，更容易，更可维护和可扩展的方法来实现所需的结果。

不引人注目的JavaScript方式

只是没有 href 完全属性！任何好的CSS重置都会处理缺少的默认光标样式，因此这不是问题。然后使用优雅且不显眼的最佳实践附加您的JavaScript功能 - 当您的JavaScript逻辑保留在JavaScript而不是标记中时，这些实践更易于维护 - 这在您开始开发需要将逻辑拆分为大型JavaScript应用程序时非常重要黑盒子组件和模板。更多相关内容 大型JavaScript应用程序架构

简单的代码示例

// 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>

黑盒子 Backbone.js的 例

对于可扩展的黑盒子Backbone.js组件示例 - 在这里看到这个工作的jsfiddle例子。请注意我们如何利用不引人注目的JavaScript实践，并且在少量代码中有一个可以在页面上重复多次的组件，而不会在不同的组件实例之间产生副作用或冲突。惊人！

笔记

• 省略了 href 属性 a element将导致无法使用该元素进行访问 tab 键导航。如果您希望通过这些元素访问这些元素 tab 键，你可以设置 tabindex 属性或使用 button 而不是元素。您可以轻松地将按钮元素设置为看起来像普通链接，如中所述 Tracker1的答案。

• 省略了 href 属性 a 元素会导致 Internet Explorer 6中 和 Internet Explorer 7中 不要承担 a:hover 样式，这就是为什么我们添加了一个简单的JavaScript垫片来实现这一点 a.hover 代替。这是完全没问题的，好像你没有href属性并且没有优雅的降级那么你的链接无论如何都不会起作用 - 你会担心更大的问题。

• 如果您希望您的操作仍然可以禁用JavaScript，那么使用 a 元素与 href 属于某个URL的属性，该URL将手动执行操作，而不是通过Ajax请求或任何应该去的方式。如果你这样做，那么你想确保你这样做 event.preventDefault() 在您的点击通话上，以确保单击该按钮时它不会跟随该链接。此选项称为优雅降级。

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

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

老实说我也不建议。我会用程式化的 <button></button> 对于那种行为。

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>

这样您就可以指定onclick。我还建议通过脚本绑定，而不是使用 onclick 元素标签上的属性。唯一的问题是在旧的IE中无法禁用的伪造的3d文本效果。

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

• 如果您的onclick事件失败，将始终拦截。
• 不会发生错误的加载调用，或者根据哈希更改触发其他事件
• 如果点击通过（onclick throws），哈希标记可能会导致意外行为，除非它是适当的直通行为，并且您想要更改导航历史记录，否则可以避免它。

注意：您可以更换 0 用一个字符串如 javascript:void('Delete record 123') 它可以作为一个额外的指示器，显示点击实际上会做什么。

第一个，理想情况下，如果用户禁用了JavaScript，可以使用真实链接。只需确保返回false以防止在JavaScript执行时触发click事件。

<a href="#" onclick="myJsFunc(); return false;">Link</a>

如果您使用Angular2，这种方式有效：

<a [routerLink]="" (click)="passTheSalt()">Click me</a>。

看这里 https://stackoverflow.com/a/45465728/2803344

理想情况下你会这样做：

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

或者，更好的是，你在HTML中有默认的动作链接，并且你在DOM渲染后通过JavaScript不加干扰地将onclick事件添加到元素中，从而确保如果不存在/使用JavaScript你就不会让无用的事件处理程序摆脱你的代码，并可能使你的实际内容混淆（或至少分散注意力）。

如果你问我我也不会;

如果您的“链接”的唯一目的是运行一些JavaScript代码，则它不符合链接条件;而是一段带有JavaScript函数的文本。我建议使用一个 <span> 用一个标签 onclick handler 附加到它和一些基本的CSS来模仿链接。链接用于导航，如果您的JavaScript代码不用于导航，则不应该是导航 <a> 标签。

例：

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

只使用 # 做了一些有趣的动作，所以我建议使用 #self 如果你想节省打字的努力 JavaScript bla, bla,。