题 我应该将哪个“href”值用于JavaScript链接,“#”或“javascript:void(0)”?


以下是构建链接的两种方法,其唯一目的是运行JavaScript代码。哪个更好,在功能,页面加载速度,验证目的等方面?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

要么

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


3677


起源


除非我遗漏了什么, <a href="javascript:void(0)" onclick="myJsFunc();"> 绝对没有意义。如果你 必须 使用 javascript: psuedo-protocol,你不需要 onclick 属性也是。 <a href="javascript:myJsFunc();"> 会做得很好。 - Wesley Murch
@WesleyMurch - 如果 myJsFunc() 有一个返回值,您的页面将会中断。 jsfiddle.net/jAd9G  你还是要用 void 像这样: <a href="javascript:void myJsFunc();">。但那时,行为仍然会有所不同。通过上下文菜单调用链接不会触发 click 事件。 - gilly3
为什么不呢 <a href="javascript:;" onclick="myEvent()"? - 3k-
javascript:; 输入要快得多 javascript:void(0) - Mike Causer
在看这个时首先想到:“你为什么要用一个 <a> 标记如果你想要做的不是通过本机浏览器功能打开另一个页面,而是要触发一些javascript'动作'?只需使用一个 span 用一类标记 js-trigger 可能会好得多“。或者我错过了什么? - Adrien Be


答案:


我用 javascript:void(0)

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

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

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

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

第三个原因是有些情况 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)"

第二个显然更容易沟通。


2009



我总是打开一个新选项卡中的每个链接,这就是我个人讨厌人们使用时的原因 href="javascript:void(0)" 方法 - Timo Huovinen
抱歉不同意为什么这个答案有这么多的赞成?任何使用 javascript: 应该被认为是不好的做法,突兀和不优雅的降级。 - Lankymart
接下来的两个答案比这个答案要好得多和合理。前两个参数也是无效的,因为 event.preventDefault() 是否有完全防止默认行为(如在这种情况下跳到页面顶部)并在没有所有的情况下做得更好 return false; 疯狂。 - sudee
快进到2013年: javascript:void(0) 违反 内容安全政策 在启用CSP的HTTPS页面上。然后可以使用一种选择 href='#' 和 event.preventDefault() 在处理程序中,但我不喜欢这么多。也许你可以建立一个使用的约定 href='#void' 并确保页面上没有元素 id="void"。这样,单击指向不存在的锚点的链接将不会滚动页面。 - jakub.g
您可以使用“#”然后将点击事件绑定到所有带有“#”的链接 href。这将在jQuery中完成: $('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; }); - Nathan


都不是。

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

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

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

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


1201



您能举例说明如何使用JavaScript和适当的点击事件处理程序将锚标记注入文档中吗? - user456584
为什么要注入锚标记,如果它只是用于允许元素a)单击b)显示“指针”光标。在这种情况下甚至注入锚标记似乎无关紧要。 - crush
两者都不是+1,但有过多的方法。事实仍然是使用 javascript: 要么 # 都是不好的做法,不被鼓励。好文章顺便说一句。 - Lankymart
@crush:我也不会使用div或span;坦率地说,这似乎就是这样 <button> 是为了。但同意:它可能不应该是具体的 <a> 如果没有合适的地方可以链接到。 - cHao
@cHao Button也许是最好的选择。我想主要的一点是,HTML元素不应该基于其默认的表示外观来选择,而是它对文档结构的重要性。 - crush


<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() 在您的点击通话上,以确保单击该按钮时它不会跟随该链接。此选项称为优雅降级。


735



小心,关闭href属性不是跨浏览器兼容,你将失去诸如Internet Explorer中的悬停效果之类的东西 - Thomas Davis
我倾向于同意这个答案,但是省略href属性会产生另一个问题。在许多浏览器中,如果您非常快速地多次单击链接,它将实际选择页面上的文本。设置href解决了特别难以解决的特殊问题。 - Christopher Camps
当心:链接风格 button 这里提出的方法受到了困扰 IE9及更低版本中不可避免的“3d”活动状态。 - Brennan Roberts
我发现这个答案过于教条。有时您只想将JS行为应用于1或2个href。在这种情况下,定义额外的CSS并注入整个JS函数是过度的。在某些情况下(例如,通过CMS添加内容),实际上并非如此 允许 注入新的CSS或独立的JS,你可以做的就是内联。我没有看到内联解决方案的可维护性如何 在实践中 1或2个简单的JS a href。总是怀疑关于不良做法的广泛一般性陈述,包括这一个:) - Jordan Rieger
所有那些难以解决的“笔记”(设置tabindex会在复杂页面上遇到麻烦!)。做得好得多 javascript:void(0)。这是务实的答案,也是现实世界中唯一明智的答案。 - Abhi Beckert


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

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


281



避免这种情况的方法是在onclick事件处理程序中返回false。 - Guvante
如果JavaScript没有成功运行,那么在事件处理程序中返回false并不能避免这种情况。 - Quentin
使用“#someNonExistantAnchorName”效果很好,因为它无处可跳转。 - scunliffe
如果你有一个基础href,那么 # 要么 #something 会带你去那个锚 在基础href 页面,而不是在当前页面上。 - Abhi Beckert
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" class="link">link</button>.</p>

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


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

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

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


209



在IE8 / IE9中,我无法删除按钮处于活动状态的1px“3D”偏移。 - Brennan Roberts
@BrennanRoberts是的,不幸的是,任何按钮样式对IE来说都更成问题...我仍然觉得这可能是最合适的方法,而不是我偶尔不会违反自己的规则。 - Tracker1
然后不要使用 <button> 但是 input type=button 代替? - Patrik Affentranger
然后用一个 <clickable> 元件。或者a <clickabletim> 如果你更喜欢。不幸的是,使用非标准标签或普通div可能会使键盘用户难以聚焦元素。 - joeytwiddle
这个答案应该是最重要的。如果你遇到这种困境,你很可能真的需要一个 button。幸运的是,IE9正迅速失去市场份额,1px的主动效应不应该阻止我们使用语义标记。 <a> 是一个链接,它意味着送你到某个地方,我们的行动 <button>的。 - mjsarfatti


第一个,理想情况下,如果用户禁用了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


128



因此,在启用了JavaScript并且支持该功能的用户代理中,运行JavaScript函数,对于指向页面顶部的链接(对于JS因任何原因失败的用户代理)而退回?这很少是明智的后备。 - Quentin
“理想情况下,如果用户禁用了JavaScript,可以使用真正的链接”,它应该是一个有用的页面而不是#,即使它只是解释网站需要JS才能工作。至于失败,我希望开发人员在部署之前使用适当的浏览器功能检测等。 - Zach
我会假设(希望)像这样的东西只能用于显示弹出窗口或类似的简单东西。在这种情况下,默认值为弹出页面url。如果这是Web应用程序的一部分,或者禁用JS会完全破坏页面,那么此代码还有其他问题...... - Brian Moeskau
我的网络应用程序旨在优雅地降级,因此链接仍然是一个有用的页面。除非您的网络应用程序是聊天客户端或交互式的东西,否则如果您花时间进行设计并考虑到降级,这应该可行。 - Zach
问题是如果myJsFunc抛出错误,则不会为返回false捕获它。 - Tracker1


理想情况下你会这样做:

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

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


90





如果你问我我也不会;

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


86



此方法将“链接”限制为仅鼠标操作。可以通过键盘访问锚点,并在按下回车键时触发“onclick”事件。 - AnthonyWJones
CSS中的硬编码颜色会阻止浏览器使用用户可能定义的自定义颜色,这可能是可访问性的问题。 - Hosam Aly
<span>s并不意味着 做 任何东西。 <A>nchors和 <buttons> 用于那个! - redShadow
运用 buttons 在使用a时,这是一个更好的选择 span 不是。 - apnerve
我认为跨度比锚标签更好。存在锚标记以引导您到其强制href属性。如果您不打算使用href,请不要使用锚点。它不仅限制鼠标链接,因为它不是链接。它没有href。它更像是一个按钮,但它没有发布。不打算做任何事情的范围完全无效。考虑一下在您悬停时激活的下拉菜单。它可能是跨度和div的组合,执行按钮的功能,可以扩展屏幕上的区域。 - NibblyPig


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


73



哇,赞成这个提示。永远不知道你可以使用 #self 用于命名标签,并避免恼人的浏览器跳转到页面顶部的行为。谢谢。 - alonso.torres
以供参考, #self 看起来并不特别。任何与文档中任何元素的名称或ID不匹配的片段标识符(并且不是空白或“顶部”)应该具有相同的效果。 - cHao
我通常只使用一个组成的锚名称,但我想我会开始这样做以保持我的工作一致。 - Douglas.Sesar
我建议建立 #void 其他评论中的惯例,但实际上 #self 简单易记。一切都比 # - jakub.g
但是如果你点击那个链接,用户在网址中看到“#void”,看起来像是错误或错误,与#self或者其他相同,这将是奇怪的。 - pmirnd