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

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

第一个，理想情况下，在用户禁用JavaScript的情况下，有一个真正的链接可以跟踪。只要确保返回false，以防止在JavaScript执行时触发单击事件。

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

如果你使用Angular2，这种方式工作：

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

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

不要忽视这样一个事实，即您的URL可能是必要的——在遵循引用之前会触发onClick，因此有时您需要在导航离开页面之前处理客户端的某些内容。

除非您使用JavaScript编写链接（以便您知道它在浏览器中已启用），否则理想情况下，您应该为禁用JavaScript浏览的人提供适当的链接，然后在您的onClick事件处理程序中阻止链接的默认操作。这样，启用JavaScript的人将运行该函数，禁用JavaScript的人将跳转到适当的页面（或同一页面中的位置），而不仅仅是单击链接而什么都不发生。

都不是。

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

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

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

查看不显眼的JavaScript和渐进式增强（均为维基百科）。

理想情况下你会这样做：

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

或者，更好的是，你会有超文本标记语言中的默认操作链接，并且你会在DOM渲染后通过JavaScript不显眼地将onClick事件添加到元素中，从而确保如果JavaScript不存在/未使用，你不会有无用的事件处理程序来混淆你的代码并可能混淆（或至少分散你的实际内容）。

让您的网站被禁用JavaScript的用户访问是很好的，在这种情况下，href指向一个执行与正在执行的JavaScript相同操作的页面。否则，我使用“#”和“return false;”来防止默认操作（滚动到页面顶部），正如其他人提到的那样。

谷歌搜索“javascript:void(0)”提供了很多关于这个主题的信息。其中一些，比如这一个提到了不要使用空（0）的原因。

理想情况下，您应该有一个真实的URL作为非JavaScript用户的后备。

如果这没有意义，请使用#作为href属性。我不喜欢使用onclick属性，因为它将JavaScript直接嵌入到超文本标记语言中。更好的主意是使用外部JS文件，然后将事件处理程序添加到该链接。然后您可以阻止默认事件，以便在用户单击后URL不会更改为附加#。

即使你问我，

如果你的“链接”的唯一目的是运行一些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>

根据你想要完成的任务，你可以忘记onClick，只使用href：

<a href="javascript:myJsFunc()">Link Text</a>

它绕过了返回false的需要。我不喜欢#选项，因为如前所述，它会将用户带到页面顶部。如果你有其他地方可以发送用户，如果他们没有启用JavaScript（这在我工作的地方很少见，但这是一个非常好的主意），那么Steve提出的方法很棒。

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

最后，如果你不想让任何人去任何地方，或者你不想调用JavaScript函数，你可以使用javascript:void(0)。如果你有一个图像，你想要一个鼠标悬停事件发生，它会很好，但没有任何东西供用户点击。

我认为你提出了错误的二分法。这不是唯一的两个选择。

我同意D4V360先生的建议，即使您使用的是锚标记，您在这里也没有真正的锚。您所拥有的只是文档的一个特殊部分，其行为应该略有不同。<span>标签更合适。

如果您使用链接作为只是执行一些JavaScript代码的方式（而不是使用像D4V360这样的跨度），只需执行：

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

如果您使用的是带有onClick的链接进行导航，请不要在JavaScript关闭时使用href="#"作为后备。当用户单击链接时通常会非常烦人。相反，如果可能，请提供onClick处理程序将提供的相同链接。如果您做不到这一点，请跳过onClick，只需在href中使用JavaScript URI。

我使用javascript:void(0)。

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

function doSomething() {//Some codereturn false;}

但是他们忘记在onClick中使用return doSomething()，而只使用doSomething()。

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

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

onclick="someFunc.call(this)"

或

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

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

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

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

或

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

第二个显然更容易沟通。

如果您使用的是<a>元素，请使用：

<a href="javascript:myJSFunc();" />myLink</a>

就我个人而言，我稍后会使用JavaScript附加一个事件处理程序（使用attachEvent或addEventListener，或者也可以<把你最喜欢的JavaScript框架放在这里>）。

我同意其他地方的建议，即您应该在href属性中使用常规URL，然后在onClick中调用一些JavaScript函数。缺陷是，他们在调用后自动添加return false。

这种方法的问题是，如果函数不起作用或有任何问题，链接将变得无法单击。OnClick事件将始终返回false，因此不会调用正常的URL。

有一个非常简单的解决方案。如果函数正常工作，让它返回true。然后使用返回的值来确定是否应该取消单击：

javascript

function doSomething() {alert( 'you clicked on the link' );return true;}

超文本标记语言

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

请注意，我否定了doSomething()函数的结果。如果它有效，它将返回true，因此它将被否定（false）并且不会调用path/to/some/URL。如果函数将返回false（例如，浏览器不支持函数中使用的某些内容或其他任何错误），它将被否定为true并且调用path/to/some/URL。

如果控件应该在数据中产生更改，我建议使用<button>元素代替，特别是。（类似于POST。）

如果你不显眼地注入元素会更好，这是一种渐进式增强。（参见这一评论。）

通常，您应该始终有一个后备链接，以确保禁用JavaScript的客户端仍然具有某些功能。这个概念称为不引人注目的JavaScript。

例如，假设您有以下搜索链接：

<a href="search.php" id="searchLink">Search</a>

您始终可以执行以下操作：

var link = document.getElementById('searchLink');
link.onclick = function() {try {// Do Stuff Here} finally {return false;}};

这样，禁用JavaScript的人会被引导到search.php，而使用JavaScript的查看器会查看您的增强功能。

最好使用jQuery，

$(document).ready(function() {$("a").css("cursor", "pointer");});

并省略href="#"和href="javascript:void(0)"。

锚标记标记将像

<a onclick="hello()">Hello</a>

够简单的！

只是为了抓住其他一些人提到的观点。

最好绑定事件'onload'a或$（'documents'）. Ready{}；然后将JavaScript直接放入单击事件中。

在JavaScript不可用的情况下，我会对当前URL使用href，也许是链接位置的锚点。该页面仍然可用于没有JavaScript的人那些不会注意到任何差异的人。

当我手头有它时，这里有一些jQuery可能会有所帮助：

var [functionName] = function() {// do something};
jQuery("[link id or other selector]").bind("click", [functionName]);

你也可以像这样在锚中写一个提示：

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

所以用户会知道这个链接是做什么的。

我使用以下

<a href="javascript:;" onclick="myJsFunc();">Link</a>

而是

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

绝对哈希（#）更好，因为在JavaScript中它是一个伪化学：

1. 污染历史
2. 实例化引擎的新副本
3. 在全局范围内运行，不尊重事件系统。

当然，带有防止默认操作的onClick处理程序的“#”要好得多。此外，一个仅用于运行JavaScript的链接并不是真正的“链接”，除非您在出现问题时将用户发送到页面上的某个合理锚点（只有#会发送到顶部）。您可以简单地使用样式表模拟链接的外观，根本忘记href。

此外，关于科夫的建议，特别是这个：...href="javascript_required.html" onclick="...这是一个很好的方法，但它没有区分“JavaScript禁用”和“onClick失败”场景。

#比javascript:anything好，但以下内容更好：

超文本标记语言：

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript：

$(function() {$(".some-selector").click(myJsFunc);});

您应该始终努力实现优雅的降级（在用户没有启用JavaScript的情况下……以及当它有规格和预算时）。此外，直接在超文本标记语言中使用JavaScript属性和协议被认为是不好的形式。

与整体情绪完全一致，需要时使用void(0)，需要时使用有效的URL。

使用url重写，您可以创建URL，不仅可以在禁用JavaScript的情况下执行您想执行的操作，还可以准确地告诉您它要执行的操作。

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

在服务器端，你只需要解析URL和查询字符串并做你想做的事情。如果你聪明，你可以允许服务器端脚本以不同的方式响应Ajax和标准请求。允许你拥有简洁的集中式代码来处理页面上的所有链接。

URL重写教程

优点

• 显示在状态栏
• 通过JavaScript中的onClick处理程序轻松升级到Ajax
• 实际评论本身
• 防止您的目录被一次性使用的超文本标记语言文件弄得乱七八糟

缺点

• 应该在JavaScript中使用event.preventDefault（）
• 服务器端相当复杂的路径处理和URL解析。

我相信外面还有很多骗子。请随意讨论。

这里还有一件重要的事情要记住。第508条合规性。正因为如此，我觉得有必要指出，你需要为屏幕阅读器提供锚点标签，例如JAWS，以便能够通过选项卡对焦。因此，解决方案“一开始就使用JavaScript并忘记锚点”并不是其中一些选项。只有当你负担不起屏幕跳回到顶部时，才有必要在href中触发JavaScript。你可以使用settimeout 0秒，让JavaScript触发到你需要焦点的地方，但即使是页面也会跳到顶部然后返回。

我选择usejavascript:void(0)，因为使用它可以阻止右键单击打开内容菜单。但是javascript:;更短，做同样的事情。

仅使用#会产生一些有趣的动作，所以如果您想节省JavaScript bla, bla,的打字工作，我建议使用#self。

我强烈希望尽可能让我的JavaScript远离超文本标记语言。如果我使用<a>作为单击事件处理程序，那么我建议使用<a class="trigger" href="#">Click me!</a>。

$('.trigger').click(function (e) {e.preventDefault();// Do stuff...});

非常重要的是要注意，许多开发人员认为使用锚标记进行点击事件处理程序不好。他们更喜欢您使用<span>或<div>以及一些添加cursor: pointer;的CSS。这是一个争论不休的问题。

我基本上是从这篇实用的文章使用渐进式增强.简短的回答是，你永远不会使用#0或#1，除非你的用户交互界面已经推断出JavaScript是启用的，在这种情况下，你应该使用#0转述的。另外，不要使用跨度作为链接，因为这在语义上是错误的。

在您的应用程序中使用seo友好的URL路由，例如 /Home/Action/Parameters也是一种很好的做法。如果您首先有一个指向没有JavaScript的页面的链接，您可以在之后增强体验。使用指向工作页面的真实链接，然后添加onlick事件来增强演示文稿。

这是一个示例。Home/ChangePicture是一个工作链接，指向页面上的表单，完整的用户交互界面和标准的超文本标记语言提交按钮，但它看起来更好地注入到带有jQueryUI按钮的模态对话框中。无论哪种方式都有效，取决于浏览器，这满足移动优先开发。

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>
<script type="text/javascript">function ChangePicture_onClick() {$.get('Home/ChangePicture',function (htmlResult) {$("#ModalViewDiv").remove(); //Prevent duplicate dialogs$("#modalContainer").append(htmlResult);$("#ModalViewDiv").dialog({width: 400,modal: true,buttons: {"Upload": function () {if(!ValidateUpload()) return false;$("#ModalViewDiv").find("form").submit();},Cancel: function () { $(this).dialog("close"); }},close: function () { }});});return false;}</script>

我从你的话中理解的是，你想创建一个链接只是为了运行JavaScript代码。

然后你应该考虑到有些人在他们的浏览器中阻止了JavaScript。

因此，如果您真的要使用该链接仅用于运行JavaScript函数，那么您应该动态添加它，这样即使用户没有在浏览器中启用他们的JavaScript，您使用该链接只是为了触发JavaScript函数，当JavaScript在浏览器中禁用时，使用这样的链接是没有意义的。

因此，当JavaScript被禁用时，它们都不好。

如果启用了JavaScript并且您只想使用该链接来调用JavaScript函数，则

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

远比使用

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

因为href="#"会导致页面执行不需要的操作。

此外，<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>比<a href="#" onclick="myJsFunc();">Link</a>更好的另一个原因是JavaScript被用作大多数浏览器的默认脚本语言。例如，Internet Explorer使用onClick属性来定义将使用的脚本语言类型。除非弹出另一种好的脚本语言，否则Internet Explorer也将使用JavaScript作为默认语言，但如果另一种脚本语言使用javascript:，它将让Internet Explorer了解正在使用哪种脚本语言。

考虑到这一点，我更喜欢使用和锻炼

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

足以让它成为一种习惯并更用户友好，请在JavaScript代码中添加此类链接：

$(document).ready(function(){$(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')});

老实说，我建议两者都不要。我会用风格化的<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>

This way you can assign your onclick. I also suggest binding via script, not using the onclick attribute on the element tag. The only gotcha is the psuedo 3d text effect in older IEs that cannot be disabled.

If you MUST use an A element, use javascript:void(0); for reasons already mentioned.

• Will always intercept in case your onclick event fails.
• Will not have errant load calls happen, or trigger other events based on a hash change
• The hash tag can cause unexpected behavior if the click falls through (onclick throws), avoid it unless it's an appropriate fall-through behavior, and you want to change the navigation history.

NOTE: You can replace the 0 with a string such as javascript:void('Delete record 123') which can serve as an extra indicator that will show what the click will actually do.

我会使用：

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

理由：

1. 这使得href简单，搜索引擎需要它。如果您使用其他任何东西（例如字符串），它可能会导致404 not found错误。
2. 当鼠标悬停在链接上时，它不会显示它是一个脚本。
3. 通过使用return false;，页面不会跳转到顶部或破坏back按钮。

做<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中而不是在您的标记中时，这更容易维护。

简单的代码示例

// 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实践，在少量代码中，有一个组件可以在页面上重复多次，而不会产生副作用或不同组件实例之间的冲突。太神奇了！

备注

• 省略a元素上的href属性将导致无法使用tab键导航访问该元素。如果您希望通过tab键访问这些元素，您可以设置tabindex属性，或使用button元素代替。您可以轻松地将按钮元素设置为Tracker1的答案中提到的普通链接。

• 省略a元素上的href属性将导致Internet Explorer 6和Internet Explorer 7不采用a:hover样式，这就是为什么我们添加了一个简单的JavaScript shim来通过a.hover来实现这一目标。这完全没问题，就好像你没有href属性，也没有优雅的降级，那么你的链接无论如何都不会工作-你会有更大的问题要担心。

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

为了完整性，这里还有一个选项，即使JavaScript被禁用，它也会阻止链接做任何事情，而且很短：）

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

如果页面上没有ID，则链接将什么也不做。

一般来说，我同意Aaron Wagner的回答，JavaScript链接应该与JavaScript代码一起注入到文档中。

我看到很多人的答案，他们想继续使用#值作为href，因此，这里有一个答案，希望能满足两个阵营：

（一）我很高兴有javascript:void(0)作为我的href值：

<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>

B）我正在使用jQuery，并希望#作为我的href值：

<a href="#" onclick="someFunc.call(this)">Link Text</a>
<script type="text/javascript">/* Stop page jumping when javascript links are clicked.Only select links where the href value is a #. */$('a[href="#"]').live("click", function(e) {return false; // prevent default click action from happening!e.preventDefault(); // same thing as above});</script>

请注意，如果您知道链接不会动态创建，请改用click函数：

$('a[href="#"]').click(function(e) {

当我有几个人造链接时，我更喜欢给它们一个“无链接”类。

然后在jQuery中，我添加了以下代码：

$(function(){$('.no-link').click(function(e){e.preventDefault();});});

对于超文本标记语言，链接很简单

<a href="/" class="no-link">Faux-Link</a>

我不喜欢使用哈希标签，除非它们用于锚点，而且我只有在有两个以上的人造链接时才会执行上述操作，否则我会使用javascript：val（0）。

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

通常，我喜欢完全避免使用链接，而只是将一些东西包裹在一个跨度中，并将其用作激活一些JavaScript代码的方式，例如弹出窗口或内容显示。

您可以使用href并删除所有只有哈希值的链接：

超文本标记语言：

<a href="#" onclick="run_foo()"> foo </a>

js：

$(document).ready(function(){         // on DOM ready or some other event
$('a[href=#]').attr('href','');    // set all reference handles to blank strings//  for anchors that have only hashes
});

你不应使用内联onclick="something();"在你的超文本标记语言中，不要用无意义的代码污染它；所有点击绑定必须在Javascript文件（*. js）中设置。

像这样设置绑定：$('#myAnchor').click(function(){... **return false**;});或$('#myAnchor').bind('click', function(){... **return false**;});

然后你有一个干净的超文本标记语言文件易于加载（和seo友好），没有成千上万的href="javascript:void(0);"和href="#"

如果您碰巧使用Angular JS，您可以使用以下命令：

<a href="">Do some fancy JavaScript</a>

它不会做任何事情。

此外

• 它不会把你带到页面的顶部，就像（#）
  • 因此，您不需要使用JavaScript显式返回false
• 它很简短

所以，当你用<a />标签做一些JavaScript的事情时，如果你也放了href="#"，你可以在事件（在内联事件绑定的情况下）的末尾添加错误返回值，比如：

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

或者您可以使用JavaScript更改href属性，例如：

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

或

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

但从语义上讲，上述所有实现此目的的方法都是错误的（虽然它工作得很好）。如果没有创建任何元素来导航页面并且与之关联了一些JavaScript内容，那么它不应该是<a>标签。

你可以简单地使用<button />来代替做事情或任何其他元素，如b、跨度或任何适合你需要的东西，因为你可以在所有元素上添加事件。

所以，有一个好处使用<a href="#">。当你做a href="#"时，你默认会在该元素上获得光标指针。为此，我认为你可以像cursor:pointer;一样使用CSS，这也解决了这个问题。

最后，如果你从JavaScript代码本身绑定事件，如果你使用<a>标签，你可以做event.preventDefault()来实现这一点，但如果你不使用<a>标签，你有一个优势，你不需要这样做。

所以，如果你看到了，最好不要为这种东西使用标签。

我对我想要虚拟行为的链接使用href="#"。然后我使用这段代码：

$(document).ready(function() {$("a[href='#']").click(function(event) {event.preventDefault();});});

这意味着如果href等于哈希 (*="#") 它可以防止默认链接行为，因此仍然允许您为其编写功能，并且它不会影响锚点点击。

我想说最好的方法是在一个你永远不会使用的ID上做一个href锚，比如#Do1Not2Use3This4Id5或类似的ID，你100%确定没有人会使用，也不会冒犯别人。

1. Javascript:void(0)是个坏主意，违反了启用CSP的HTTPS页面https://developer.mozilla.org/en/docs/Security/CSP的内容安全策略（感谢@jakub. g）
2. 仅使用#将使用户在按下时跳回顶部
3. 如果未启用JavaScript，则不会破坏页面（除非您有JavaScript检测代码）
4. 如果启用了JavaScript，您可以禁用默认事件
5. 除非你知道如何阻止浏览器选择某些文本，否则你必须使用href（不知道使用4是否会删除阻止浏览器选择文本的东西）

基本上没有人在这篇文章中提到5，我认为这很重要，因为如果你的网站突然开始选择链接周围的东西，它就会变得不专业。

我个人将它们组合使用。例如：

超文本标记语言

<a href="#">Link</a>

用一点jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

或

$('a[href="#"]').click(function(e) {e.preventDefault();});

但我使用它只是为了防止当用户单击空锚点时页面跳转到顶部。我很少直接在超文本标记语言中使用onClick和其他on事件。

我的建议是使用<span>元素和class属性，而不是一个锚点。例如：

<span class="link">Link</span>

然后将函数分配给.link，脚本包装在主体中，就在</body>标记之前或外部JavaScript文档中。

<script>(function($) {$('.link').click(function() {// do something});})(jQuery);</script>

*注：对于动态创建的元素，使用：

$('.link').on('click', function() {// do something});

对于使用动态创建的元素创建的动态创建的元素，请使用：

$(document).on('click','.link', function() {// do something});

然后，您可以将跨度元素设置为看起来像带有一点CSS的锚点：

.link {color: #0000ee;text-decoration: underline;cursor: pointer;}.link:active {color: red;}

这是上面提到的一个jsFiddle示例。

为什么不使用这个？这不会向上滚动页面。

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>

我通常会选择

<a href="javascript:;" onclick="yourFunction()">Link description</a>

它比javascript： ull（0）短，并做同样的事情。

不要将链接仅用于运行JavaScript。

使用href="#"将页面滚动到顶部；使用val（0）会在浏览器中产生导航问题。

相反，使用链接以外的元素：

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

并使用CSS设置样式：

.funcActuator {cursor: default;}
.funcActuator:hover {color: #900;}

我用开发者工具在google chrome中尝试了这两种方法，id="#"花了0.32秒。而javascript:void(0)方法只花了0.18秒。所以在google chrome中，javascript:void(0)工作得更好更快。

在现代网站上，如果元素仅执行JavaScript功能（不是真正的链接），则应避免使用href。

为什么？此元素的存在告诉浏览器这是一个与目标的链接。这样，浏览器将显示“在新选项卡中打开”/“窗口”功能（当您使用Shift+单击时也会触发）。这样做将导致在没有触发所需功能的情况下打开同一页面（导致用户沮丧）。

关于IE：从IE8开始，如果设置了doctype，元素样式（包括悬停）就可以工作。其他版本的IE不再需要担心了。

唯一的缺点：删除HREF会删除tabindex。要克服这个问题，您可以使用样式为链接的按钮或使用JS添加tabindex属性。

4.0之前的Bootstrap模态有一个基本上没有记录的行为，它们将使用AJAX从a元素加载href，除非它们完全是#。如果您使用的是Bootstrap 3，javascript:void(0); hrefs将导致javascript错误：

AJAX Error: error GET javascript:void(0);

在这些情况下，您需要升级到bootstrap 4或更改href。

2019年1月编辑

在HTML5中，使用不带href属性的a元素是有效。它被认为是"占位符超链接"

如果a元素没有href属性，则该元素表示一个占位符，用于放置链接的位置，如果它是相关的，则仅由元素的内容组成。

示例：

<a>previous</a>

如果之后你想做其他事情：

1-如果您的链接没有去任何地方，请不要使用<a>元素。使用<span>或其他合适的东西，并添加CSS:hover以根据需要设置样式。

2-使用javascript:void(0)或javascript:undefined或javascript:;，如果你想原始，精确和快速。

•Javascript: void(0);为空值[未分配]，这意味着您的浏览器将NULL单击DOM，窗口返回为false。
•'#'不是遵循javascript中的DOM或窗口。这意味着锚点href中的“#”符号是LINK。链接到相同的当前方向。

您可以在此处使用javascript： ull（0）而不是使用#来停止锚标记重定向到标头部分。

function helloFunction() {alert("hello world");}<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>

最简单和使用的每个人大多是JavaScript：无效（0）你可以使用它，而不是使用#停止 标记重定向到标题部分。

<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>
function testFunction() {alert("hello world");}

实际上这里有四种选择。

使用return false;允许您在希望在具有JavaScript禁用或在用户代理中不受支持（现在1-5%的用户）的浏览器中安全“回退”的情况下保留锚点版本。您可以使用锚点“#”符号、空字符串或href如果您的脚本失败的特殊URL。请注意，您必须使用href，以便屏幕阅读器知道它是一个超链接。（注意：我不打算讨论删除href属性的争论，因为这一点在这里没有意义。锚点上没有href意味着锚点不再是一个超链接，只是一个捕获的带有单击事件的html标记。）

<a href="" onclick="alert('hello world!');return false;">My Link</a><a href="#" onclick="alert('hello world!');return false;">My Link</a><a href="MyFallbackURL.html" onclick="alert('hello world!');return false;">My Link</a>

下面是今天在href属性中使用javascript:void(0)的更流行的设计。如果浏览器不支持脚本，它应该再次发布回其页面，因为href超链接路径返回一个空字符串。如果您不在乎谁支持JavaScript，请使用此选项。

<a href="javascript:void(0);" onclick="alert('hello world!');">My Link</a>

javascript:void(0)将在将来弃用，因此您应该使用#。