我用javascript:void(0).

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

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

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

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

第三个原因是存在onclick动态分配事件属性的情况.我更喜欢能够调用函数或动态分配它,而不必专门为一种附件或其他方法编写函数.因此onclick,HTML标记中的我(或任何内容)如下所示:

onclick="someFunc.call(this)"

要么

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

使用javascript:void(0)避免了上述所有问题,我没有找到任何缺点的例子.

因此,如果您是一名独立开发人员,那么您可以明确地做出自己的选择,但如果您以团队形式工作,则必须说明:

使用href="#",确保onclick总是包含return false;在最后,任何被调用的函数都不会抛出错误,如果你动态地将一个函数附加到onclick属性,请确保它不返回错误false.

要么

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

第二个显然更容易沟通.

• 我总是打开一个新选项卡中的每个链接,这就是我个人讨厌它时人们使用`href ="javascript:void(0)"`方法的原因
• 抱歉不同意为什么这个答案有这么多的赞成？任何使用"javascript:"都应该被认为是不好的做法,突兀而且没有优雅的降级.
• 快进到2013年:`javascript:void(0)`在启用CSP的HTTPS页面上违反[内容安全策略](https://developer.mozilla.org/en/docs/Security/CSP).一种选择是在处理程序中使用`href ='#'`和`event.preventDefault()`,但我不喜欢这么多.也许你可以建立一个使用`href ='#void'的约定,并确保页面上的元素没有`id ="void"`.这样,单击指向不存在的锚点的链接将不会滚动页面.
• 接下来的两个答案比这个答案好得多且合理.前两个参数也是无效的,因为`event.preventDefault()`完全是为了防止默认行为(比如在这种情况下跳转到页面顶部)并且在没有所有`return false;的情况下做得更好.疯狂.
• 您可以使用"#"然后将click事件绑定到所有带有"#"的链接作为`href`.这将在jQuery中完成:`$('a [href ="#"]').click(function(e){e.preventDefault？e.preventDefault():e.returnValue = false;});`
• 这是最好的答案,因为它实际上回答了这个问题.大多数人似乎错过了"一个只有运行JavaScript代码的链接"部分.所有关于新标签中的链接,优雅降级和网络开发的喋喋不休都是关于主题网标准/最佳实践恐慌贩卖.没有href可能是最好的,但这实际上会降低可访问性并可能导致其他意外行为.
• 历史课:哈希`#`的使用是一个开始的黑客.较旧的浏览器(即IE)不会使`A`标签在没有非空`HREF`属性的情况下可点击,并且许多元素永远不可点击; 哈希是唯一一种使可点击的东西同时阻止导航的方法,因为有些浏览器还没有运行Javascript.没有现代(即使是现在仍在使用的旧IE)也不再存在这些问题; 因此,最好坚持使用标准并避免这些黑客以其他答案中提到的标准适当方式进行操作.
• @jaminroe好问题; 在现代浏览器中,这似乎对我有用:`window.onhashchange = function(evt){if(evt.newURL.endsWith("#void")){history.replaceState(null,null,evt.oldURL); 虽然MDN说它不支持`evt.newURL`和`evt.oldURL`(至少是IE8),但还没有用IE测试过.IE10支持`replaceState`.
• 这是最糟糕的答案.使用链接链接,而不是javascript.`javascript:`伪协议旨在用表达式返回的值替换当前文档.当使用的表达式求值为未定义的值(如某些函数调用那样)时,不替换当前页面的内容.无论如何,一些浏览器将其解释为导航并将进入"导航"状态,其中GIF动画和插件(例如电影)将停止,并且诸如META刷新,分配到"location.href"和图像交换的导航功能失败.

都不是.

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

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

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

查看Unmptrusive JavaScript和Progressive增强(两者都是Wikipedia).

• 您能举例说明如何使用JavaScript和适当的点击事件处理程序将锚标记注入文档中吗？
• @crush:我也不会使用div或span; 坦率地说,这似乎就是`<button>`.但同意:如果没有合适的地方可以链接到它,它可能不应该特别是`<a>`.
• @cHao Button也许是最好的选择.我想主要的一点是,HTML元素不应该基于其默认的表示外观来选择,而是它对文档结构的重要性.
• 两者都不是+1,但是有过多的方法.事实仍然使用`javascript:`或`#`都是不好的做法,不鼓励.好文章顺便说一句.
• _“If that is not possible, then” use a button instead._ That’s how this answer should’ve ended.
• 为什么要注入锚标记,如果它只是用于允许元素a)点击b)显示"指针"光标.在这种情况下甚至注入锚标记似乎无关紧要.
• @crush:如果通过脚本注入元素,则在禁用JS时它不会出现.因为除非JS正在运行,否则它完全被破坏,除非JS正在运行,否则它甚至不应该存在*.

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

不引人注目的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>Cancel this action</a>

黑盒子Backbone.js示例

对于可伸缩的黑盒子 Backbone.js组件示例 - 请参阅此处的jsfiddle示例.请注意我们如何利用不引人注目的JavaScript实践,并且在少量代码中有一个组件可以在页面上重复多次,而不会在不同的组件实例之间产生副作用或冲突.惊人!

笔记

• 小心,关闭href属性不是跨浏览器兼容的,你将失去诸如Internet Explorer中的悬停效果之类的东西
• 我发现这个答案过于教条.有时您只想将JS行为应用于1或2个href.在这种情况下,定义额外的CSS并注入一个完整的JS函数是过分的.在某些情况下(例如通过CMS添加内容)实际上你不允许*注入新的CSS或独立的JS,并且你可以做内联.对于1或2个简单的JS a href来说,我没有看到内联解决方案在实践中的可维护性如何*.总是怀疑关于不良做法的广泛一般性陈述,包括这一个:)
• 所有那些难以解决的"笔记"(设置tabindex会在复杂页面上遇到麻烦!).更好地做`javascript:void(0)`.这是务实的答案,也是现实世界中唯一明智的答案.
• 注意:这里建议的链接风格的"按钮"方法受到[IE9及更低版本中[不可避免的"3d"活动状态的困扰](http://stackoverflow.com/questions/6744406/internet-explorer-strange-inner-padding -on-buttonactive点击).
• 我倾向于同意这个答案,但是省略href属性会产生另一个问题.在许多浏览器中,如果您非常快速地多次单击链接,它实际上会在页面上选择文本.设置href解决了特别难以解决的特殊问题.
• 如果您关心使您的Web应用程序可访问(并且您应该),那么简单性和理智性就是href的主张.疯狂在于tabindex的方向.
• 缺少的href属性是个问题.许多浏览器不显示链接鼠标光标(是的,它可以在CSS中添加,但这已经使事情变得复杂)并且我已经看到一些可访问性软件忽略没有href的链接(它们被视为仅文本).这个答案有很好的想法,但现实世界并不是那么整洁.
• 不不不!!!不要这样做!你刚刚杀死了可访问性.拥有屏幕阅读器的用户将无法再使用您的应用程序.
• 这里完全不同意.虽然我也推广不引人注目的JavaScript,一个有"javascript:;"的锚点 并且它在其他地方绑定的实际事件并不是不好的做法.它总是比完全保留属性更好.

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

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

• 避免这种情况的方法是在onclick事件处理程序中返回false.
• 如果JavaScript没有成功运行,那么在事件处理程序中返回false并不能避免这种情况.
• 使用"#someNonExistantAnchorName"效果很好,因为它无处可跳.
• 如果你有一个基本的href,那么`#`或`#thing`将带你到基础href*页面上的那个锚*,而不是当前页面.
• shebang(`#!`)可以解决问题,但这绝对是不好的做法.
• @ Neel,文档中实际不存在的任何锚点(例如`#_`)都有相同的技巧,但有相同的缺点.

老实说我也不建议.我会使用程式化<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">link</button>.</p>

这样您就可以分配您的onclick.我还建议通过脚本绑定,而不是使用onclick元素标记上的属性.唯一的问题是旧的IE中的psuedo 3d文本效果无法禁用.

如果你必须使用A元素,请使用javascript:void(0);已经提到的原因.

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

注意:您可以0使用字符串替换,例如javascript:void('Delete record 123')可以作为额外指示符来显示点击实际执行的操作.

• 这个答案应该是最重要的.如果你遇到这种困境,你可能实际上需要一个"按钮".幸运的是,IE9正迅速失去市场份额,1px的主动效应不应该阻止我们使用语义标记.`<a>`是一个链接,它意味着把你送到某个地方,我们有`<button>`的动作.
• 然后使用`<clickable>`元素.或者如果您愿意,可以使用`<clickabletim>`.不幸的是,使用非标准标签或普通div可能会使键盘用户难以聚焦元素.

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

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

如果您使用Angular2,这种方式有效:

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

请参见/sf/answers/3182600991/

• "如果用户禁用了JavaScript,理想情况下会有一个真实的链接",它应该是一个有用的页面而不是#,即使它只是一个解释,该网站需要JS才能工作.至于失败,我希望开发人员在部署之前使用适当的浏览器功能检测等.
• 因此,在启用了JavaScript且支持该功能的用户代理中,运行JavaScript函数,对于指向页面顶部的链接,退回(对于JS因任何原因而失败的用户代理)？这很少是明智的后备.
• 我的网络应用程序旨在优雅地降级,因此链接仍然是一个有用的页面.除非您的网络应用程序是聊天客户端或交互式的东西,否则如果您花时间设计并考虑到降级,这应该可行.
• 问题是，如果myJsFunc引发错误，则不会为返回false捕获该错误。

如果你问我我也不会;

如果您的"链接"的唯一目的是运行某些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 onclick="callFunction();">here</span>.</p>

• 此方法将"链接"限制为仅鼠标操作.可以通过键盘访问锚点,并在按下回车键时触发"onclick"事件.
• CSS中的硬编码颜色会阻止浏览器使用用户可能定义的自定义颜色,这可能是可访问性的问题.
• `<span>`s并不意味着*做*任何事情.`<A>`nchors和`<buttons>`用于此!
• 使用`buttons`是一个更好的选择,而使用`span`则不是.

理想情况下你会这样做:

<a href="https://qa.1r1g.com/sf/ask/9439181/javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

<a href="https://qa.1r1g.com/sf/ask/9439181/javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

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

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

• 作为参考,"#self"看起来并不特别.任何与文档中任何元素的名称或ID不匹配的片段标识符(并且不是空白或"顶部")应该具有相同的效果.
• 我建议在另一条评论中建立`#void`约定,但实际上`#self`就是简短易记.任何东西都比`#`好
• 哇,赞成这个提示.从来不知道你可以使用`#self`作为命名标签,并避免令人讨厌的浏览器跳转到页面顶部的行为.谢谢.
• 但是如果你点击那个链接,用户在网址中看到"#void",看起来像是错误或错误,与#self或者其他相同,这将是奇怪的.

我使用以下内容

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

代替

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

• 此代码可能会导致较旧的IE出现意外情况.在某些时候它曾经用图像打破任何动画效果,包括翻转甚至GIF动画:https://groups.google.com/forum/#!topic/comp.lang.javascript/KfUlDry_ynY
• 我使用`javascript:`(没有分号),因为它在悬停状态栏中看起来最整洁.

我同意其他地方的建议,说明你应该在href属性中使用常规URL ,然后在onclick中调用一些JavaScript函数.缺点是,他们会return false在通话后自动添加.

这种方法的问题是,如果函数不起作用或者如果有任何问题,链接将变得不可点击.Onclick事件将始终返回false,因此不会调用普通URL.

这是非常简单的解决方案.true如果函数正常工作,让函数返回.然后使用返回的值来确定是否应该取消单击:

JavaScript的

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

HTML

<a href="https://qa.1r1g.com/sf/ask/9439181/path/to/some/url" onclick="return !doSomething();">link text</a>

注意,我否定了doSomething()函数的结果.如果它有效,它将返回true,因此它将被否定(false)并且path/to/some/URL不会被调用.如果函数将返回false(例如,浏览器不支持该功能中使用的东西,或其他任何出错),它被否定,true而path/to/some/URL被调用.

#比以前更好javascript:anything,但以下情况更好:

HTML:

<a href="https://qa.1r1g.com/gracefully/degrading/url/with/same/functionality.ext">For great justice</a>

JavaScript的:

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

您应该始终努力实现优雅降级(如果用户没有启用JavaScript ......以及何时使用规范和预算).此外,在HTML中直接使用JavaScript属性和协议被认为是不好的形式.

我建议使用一个<button>元素,特别是如果控件应该在数据中产生变化.(像POST一样.)

如果你不引人注意地注入元素,这是一种渐进增强,那就更好了.(见这个评论.)

除非您使用JavaScript写出链接(因此您知道它已在浏览器中启用),否则理想情况下应为正在使用JavaScript进行浏览的人提供正确的链接,然后阻止onclick中链接的默认操作事件处理程序 这样,启用JavaScript的人将运行该功能,禁用JavaScript的人将跳转到适当的页面(或同一页面内的位置),而不是仅仅点击链接并且没有任何事情发生.

绝对hash(#)更好,因为在JavaScript中它是一个伪方案:

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

当然,使用onclick处理程序来防止默认操作的"#"更好.此外,唯一目的是运行JavaScript的链接并不是真正的"链接",除非您在发生错误时将用户发送到页面上的某个合理的锚点(只有#将发送到顶部).您可以简单地模拟与样式表链接的外观和感觉,完全忘记href.

另外,关于cowgod的建议,尤其是:...href="https://qa.1r1g.com/sf/ask/9439181/javascript_required.html" onclick="...这是一种很好的方法,但它不区分"禁用JavaScript"和"onclick失败"方案.

我经常去

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

它比javascript:void(0)短并且做同样的事情.

我会用:

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

原因:

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

我选择使用javascript:void(0),因为使用这可能会阻止右键单击打开内容菜单.但是javascript:;更短并且做同样的事情.

因此,当您使用<a />标记执行某些JavaScript操作时,如果放置href="#",则可以在事件结束时添加return false (在内联事件绑定的情况下),如:

<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>标记.

您可以根据需要简单地使用a <button />来执行操作或任何其他元素,如b,span或任何适合的元素,因为您可以在所有元素上添加事件.

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

最后,如果您从JavaScript代码本身绑定事件,那么event.preventDefault()如果您使用<a>标记,则可以实现此目的,但如果您没有使用<a>标记,那么您将获得优势,我需要这样做.

所以,如果你看到,最好不要在这类东西上使用标签.

不要仅为了运行JavaScript而使用链接.

使用href ="#"将页面滚动到顶部; void(0)的使用会在浏览器中产生导航问题.

相反,使用链接以外的元素:

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

并使用CSS设置样式:

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

• 使用一个按钮,而不是一个跨度.按钮自然落在聚焦顺序,以便可以在没有鼠标/触摸板/等进行访问
• 添加吨Quentin的评论:按照目前的写法,键盘用户不会到达`span`元素,因为它是一个不可聚焦的元素.这就是你需要一个按钮的原因.
• 您可以通过将 `tabindex="0"` 添加到跨度来使其成为焦点。也就是说，使用按钮更好，因为它可以免费为您提供所需的功能。要使用跨度访问它，您不仅需要附加单击处理程序，还需要附加一个键盘事件处理程序，用于查找空格键或输入键的按下，然后触发正常的单击处理程序。您还需要将第二个 CSS 选择器更改为 `.funcActuator:hover, .funcActuator:focus`，以便元素具有焦点的事实显而易见。

使用jQuery会更好

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

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

锚标记标记就像

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

很简单!

• 为什么使用jQuery代替css {cursor:pointer; }
• 这提供了可怕的可访问性.在SO中尝试:不使用鼠标就无法标记帖子.标签可以访问"链接"和"编辑"链接,但"标记"不是.
• 我同意这个选择.如果锚没有JavaScript以外的目的,则它不应该有href.@Fatih:使用jQuery意味着如果禁用JavaScript,链接将没有指针.
• 这就是我要说的.如果链接有一个有意义的后备网址,请使用它.否则,只需省略href或使用比<a>更合理的语义.如果每个人都提倡包括href的唯一原因是让手指悬停,一个简单的"a {cursor:pointer;}"就可以了.
• 如果你打算走这条路,为什么不用jQuery绑定点击呢？使用jQuery的一个好处是能够从你的标记中分离你的javascript.
• 我不敢相信这个答案有11票.它是可怕的.为什么要通过Javascript(和jQuery ??)添加样式,然后在HTML中定义onclick操作？可怕.

如果您碰巧使用AngularJS,则可以使用以下内容:

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

哪个不会做任何事情.

此外

• 它不会带你到页面的顶部,就像(#)一样
  • 因此,您不需要false使用JavaScript 显式返回
• 它简洁而简洁

• 但这会导致页面重新加载,因为我们总是使用javascript来修改页面,这是不可接受的.

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

示例...假设您有以下搜索链接:

<a href="https://qa.1r1g.com/sf/ask/9439181/search.php">Search</a>

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

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

这样,禁用JavaScript search.php的用户就可以使用JavaScript查看您的增强功能.

如果没有,href可能没有理由使用锚标记.

您可以在几乎每个元素上附加事件(单击,悬停等),那么为什么不使用a span或a div？

对于禁用JavaScript的用户:如果没有后备(例如,替代方案href),他们至少应该无法查看该元素并与之交互,无论它是什么<a>或<span>标记.

根据你想要完成的任务,你可以忘记onclick并只使用href:

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

它绕过了返回false的需要.我不喜欢这个#选项,因为如上所述,它会将用户带到页面顶部.如果你有其他地方发送用户,如果他们没有启用JavaScript(这在我工作的地方很少,但是一个非常好的主意),那么史蒂夫提出的方法效果很好.

最后,javascript:void(0)如果您不希望任何人去任何地方并且您不想调用JavaScript函数,则可以使用.如果您有想要发生鼠标悬停事件的图像,它会很有效,但用户无需点击任何内容.

• 这个唯一的缺点(从记忆中,我可能是错的)是IE如果你没有在它内部的href,则不认为A是A.(所以CSS规则不起作用)

我相信你提出了一个错误的二分法.这些不是唯一的两个选择.

我同意D4V360先生的建议,即使你使用锚标签,你也不会真正拥有锚.您所拥有的只是文档的特殊部分,其行为应略有不同.一个<span>标签是更为合适.

当我有几个虚假链接时,我更喜欢给他们一类'无链接'.

然后在jQuery中,我添加以下代码:

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

对于HTML,链接很简单

<a href="https://qa.1r1g.com/">Faux-Link</a>

我不喜欢使用Hash-Tags,除非它们用于锚点,而且当我有两个以上的虚假链接时我只做上述操作,否则我会使用javascript:void(0).

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

通常情况下,我喜欢完全避免使用链接,只是在一个范围内包装一些内容,并使用它作为一种方式来激活一些JavaScript代码,如弹出窗口或内容显示.

我使用开发者工具在谷歌浏览器中尝试了两种方法,id="#"花了0.32秒.虽然该javascript:void(0)方法只需0.18秒.所以在谷歌浏览器中,javascript:void(0)工作得更好更快.

我个人将它们组合使用.例如:

HTML

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

一点点jQuery

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

要么

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

但我正在使用它只是为了防止页面在用户点击空锚时跳到顶部.我很少on直接在HTML中使用onClick和其他事件.

我的建议是使用<span>带class属性的元素而不是锚.例如:

<span>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
});

然后你可以将span元素设置为看起来像一个带有一点CSS的锚点:

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

这是上面提到的jsFiddle示例.

我基本上使用渐进增强来解释这篇实用文章.简短的回答是你从不使用javascript:void(0);或#除非你的用户界面已经推断出JavaScript已经启用,在这种情况下你应该使用javascript:void(0);.另外,不要使用span作为链接,因为从语义上来说这是错误的.

在您的应用程序中使用SEO友好的URL路由,例如/ Home/Action/Parameters也是一种很好的做法.如果您有一个指向不使用JavaScript的页面的链接,那么您可以在以后增强体验.使用指向工作页面的真实链接,然后添加onlick事件以增强演示.

这是一个例子.Home/ChangePicture是一个页面上的表单的工作链接,其中包含用户界面和标准HTML提交按钮,但它看起来更好,注入了带有jQueryUI按钮的模态对话框.无论哪种方式都可以,取决于浏览器,它满足移动优先开发.

<p><a href="https://qa.1r1g.com/sf/ask/9439181/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的用户可以访问您的站点,在这种情况下,href指向一个执行与正在执行的JavaScript相同的操作的页面.否则我使用带有" "的" # " return false;来阻止默认操作(滚动到页面顶部),正如其他人提到的那样.

谷歌搜索" javascript:void(0)"提供了有关此主题的大量信息.其中一些像这样提到不使用void(0)的原因.

• 链接现在（有效）已断开。

您还可以在锚中写一个提示,如下所示:

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

因此用户将知道此链接的作用.

我想说最好的方法是将一个href锚点转换为你永远不会使用的ID,比如#Do1Not2Use3This4Id5或类似的ID,你100%肯定没有人会使用它并且不会冒犯别人.

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

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

这里还有一件重要的事情需要记住.第508节合规.因此,我觉得有必要指出你需要屏幕阅读器(如JAWS)的锚标签才能通过标签对焦.因此解决方案"只使用JavaScript并忘记锚定开始"不是其中一些选项.只有当你无法让屏幕跳回到顶部时,才需要在href内部启动JavaScript.您可以将settimeout用于0秒并将JavaScript激发到您需要关注的位置,但即使是apage也会跳到顶部然后再返回.

我看到很多想要继续使用#价值观的人的答案href,因此,这是一个有希望满足两个阵营的答案:

A)我很高兴有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) {

我使用href ="#"作为我想要虚拟行为的链接.然后我使用这段代码:

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

这意味着如果href等于散列(*="#"),它会阻止默认链接行为,因此仍然允许您为其编写功能,并且它不会影响锚点击.

在现代网站上,如果元素仅执行JavaScript功能(不是真实链接),则应避免使用href.

为什么？此元素的存在告诉浏览器这是一个与目标的链接.这样,浏览器将显示"在新选项卡/窗口中打开"功能(当您使用shift +单击时也会触发).这样做会导致打开同一页面而不会触发所需的功能(导致用户受挫).

关于IE:从IE8开始,如果设置了doctype,则元素样式(包括悬停)可以工作.其他版本的IE不再需要担心了.

只有缺点:删除HREF会删除tabindex.为了解决这个问题,您可以使用一个样式为链接的按钮或使用JS添加tabindex属性.

最简单也是大家最常用的就是javascript:void(0)你可以用它来代替#来停止标签重定向到 header section。

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

不要忽视您的URL可能是必要的事实 - 在遵循引用之前触发onclick,因此有时您需要在导航离开页面之前处理客户端.

只是为了提到其他人提到的一点.

绑定事件'onload'a或$('document')要好得多.ready {}; 然后将JavaScript直接放入click事件中.

在JavaScript不可用的情况下,我会使用href到当前URL,也许是锚点到链接的位置.该页面仍可供没有JavaScript的人使用,他们不会注意到任何差异.

正如我要掌握的,这里有一些jQuery可能会有所帮助:

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

我从你的话中理解的是,你想创建一个链接来运行JavaScript代码.

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

因此,如果您真的要仅使用该链接来运行JavaScript函数,那么您应该动态添加它,这样如果用户没有在浏览器中启用它们并且您正在使用该链接,那么它甚至都不会被看到触发一个JavaScript函数,在浏览器中禁用JavaScript时使用类似的链接是没有意义的.

因此,当禁用JavaScript时,它们都不好.

如果启用了JavaScript,您只想使用该链接来调用JavaScript函数

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

<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了解正在使用的脚本语言.

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

足以使它成为习惯并且更加用户友好,请在JavaScript代码中添加这种链接:

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

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

HTML:

<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
});

• 这很糟糕,特别是在IE中(最高版本10,不确定11).单击具有空href的链接会导致不必要(可能不需要)的请求被触发,并且在IE中,它会尝试打开W​​indows资源管理器.

为什么不用这个呢？这不会向上滚动页面.

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

理想情况下,您应该有一个真正的URL作为非JavaScript用户的后备.

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

如果您使用的是<a>元素,请使用:

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

我个人稍后会使用JavaScript附加一个事件处理程序(使用attachEvent或者addEventListener或者也可以<把你最喜欢的JavaScript框架放在这里>).

• 有人可以解释为什么这个答案有这么多的downvotes吗？

完全符合整体情绪,void(0)在需要时使用,并在需要时使用有效的URL.

使用URL重写,您可以创建不仅可以执行禁用JavaScript操作的URL,而且还可以告诉您它将要执行的操作.

<a href="https://qa.1r1g.com/sf/ask/9439181/Readable/Text/URL/Pointing/To/Server-Side/Script">WhyClickHere</a>

在服务器端,您只需要解析URL和查询字符串并执行您想要的操作.如果您很聪明,则可以允许服务器端脚本以不同方式响应Ajax和标准请求.允许您使用简洁的集中代码来处理页面上的所有链接.

URL重写教程

优点

• 显示在状态栏中
• 通过JavaScript中的onclick处理程序轻松升级到Ajax
• 实际上评论自己
• 使用一次性HTML文件防止您的目录乱七八糟

缺点

• 仍应在JavaScript中使用event.preventDefault()
• 服务器端的相当复杂的路径处理和URL解析.

我相信那里有更多的缺点.随意讨论它们.

2019 年 1 月编辑

在HTML5 中，使用没有 href 属性的 a 元素是有效的。它被认为是一个“占位符超链接”

例子：

<a>previous</a>

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

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

2 -如果您想要原始、精确和快速，请使用javascript:void(0)OR javascript:undefinedOR javascript:;。

如果您使用的链接,以此来只执行一些JavaScript代码(而不是使用像D4V360跨度极大的建议),只是做:

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

如果您使用带onclick的链接进行导航,请不要在JavaScript关闭时使用href ="#"作为后备.当用户点击链接时,通常会非常烦人.相反,如果可能,提供onclick处理程序将提供的相同链接.如果您不能这样做,请跳过onclick并在href中使用JavaScript URI.

我非常希望尽可能地将我的JavaScript保留在HTML标记之外.如果我使用<a>点击事件处理程序,那么我建议使用<a href="#">Click me!</a>.

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

值得注意的是,许多开发人员都认为使用锚点标记来实现点击事件处理程序并不好.他们更喜欢你使用<span>或<div>添加一些CSS cursor: pointer;.这是一个很多争论的问题.

您不应该onclick="something();"在HTML中使用内联,以免使用无意义的代码来污染它; 必须在Javascript文件(*.js)中设置所有单击绑定.

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

然后你有一个干净的HTML文件很容易加载(和seo友好)没有数千href="javascript:void(0);"和只是href="#"