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

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

提问人: 提问时间:9/26/2008 最后编辑:18 revs, 12 users 36%Peter Mortensen 更新时间:5/29/2023 访问量:2495642

问:

以下是构建链接的两种方法,其唯一目的是运行 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>

JavaScript HTML 性能 优化 href

评论

14赞 RobG 6/11/2022
当你想要一个按钮时,为什么要使用链接?那么伪协议就没有问题了。
2赞 Synetech 8/10/2022
“验证目的 - 啊,这应该是表明这个问题已经过时的危险信号。没有人再关心验证或网络标准了。曾经有过一段短暂的时期,它很重要,事情看起来很光明,但现在,每个人都做任何他们想做的垃圾(咳 youtube ),浏览器像 90 年代的 IE 一样容纳它们。😒
0赞 RobG 4/16/2023
也不。如果确实必须使用链接,请使用样式化为链接的 span。没有 href 可打扰。为什么什么时候会做?void(0)void 0

答:

358赞 4 revs, 4 users 43%Gabe Rogan #1

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

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

评论

72赞 Guvante 9/26/2008
避免这种情况的方法是在 onclick 事件处理程序中返回 false。
39赞 Quentin 9/26/2008
在事件处理程序中返回 false 并不能避免 JavaScript 无法成功运行。
34赞 scunliffe 9/27/2008
使用“#someNonExistantAnchorName”效果很好,因为它无处可跳。
28赞 Abhi Beckert 3/28/2012
如果您有基本 href,则 or 将带您到基本 href 页面上的定位点,而不是当前页面上。##something
15赞 Neel 4/17/2014
shebang () 可以解决问题,但这绝对是不好的做法。#!
152赞 3 revs, 2 users 55%Belter #2

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

评论

20赞 Quentin 9/26/2008
那么,在启用了 JavaScript 且支持此功能的用户代理中,运行 JavaScript 函数,回退(对于 JS 因任何原因失败的用户代理)到页面顶部的链接?这很少是一个明智的后备方案。
26赞 Zach 9/26/2008
“理想情况下,如果用户禁用了 JavaScript,它应该转到一个有用的页面而不是 #,即使它只是解释该网站需要 JS 才能工作。至于失败,我希望开发人员在部署之前使用适当的浏览器功能检测等。
11赞 nathaniel #3

不要忽视你的URL可能是必要的 - onclick是在引用被跟踪之前触发的,所以有时你需要在离开页面之前处理一些客户端的东西。

45赞 Simon Forrest #4

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

1411赞 3 revs, 2 users 76%Aaron Wagner #5

也不。

如果您可以拥有一个有意义的实际 URL,请使用它作为 HREF。如果有人中键点击您的链接以打开新标签页,或者他们禁用了 JavaScript,则不会触发 onclick。

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

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

查看 Unobtrusive JavaScriptProgressive enhancement(均为维基百科)。

评论

50赞 Sebastian Simon 5/29/2021
“如果这是不可能的,那么”请改用按钮。这就是这个答案应该结束的方式。
0赞 mohamed tebry 2/11/2022
如果我们使用一个按钮,我们可爱的用户将如何使用他们闪亮的智能手机在新标签中打开他们的 HREF?
6赞 RobG 6/11/2022
@mohamedtebry,你错过了问题的重点:“构建一个唯一目的是运行 JavaScript 代码的链接”。问题是使用链接作为按钮,没有 href 可以打开。
0赞 Cemstrian 8/28/2023
@SebastianSimon Bootstrap 下拉列表具有用于样式的锚点结构。有时需要使用锚 getbootstrap.com/docs/5.3/components/dropdowns/#single-button
107赞 2 revs, 2 users 80%Steve Paulo #6

理想情况下,您可以这样做:

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

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

15赞 4 revs, 4 users 42%Peter Mortensen #7

让禁用 JavaScript 的用户能够访问您的网站是件好事,在这种情况下,href 指向执行与正在执行的 JavaScript 相同的操作的页面。否则,我使用带有“的”#“来防止默认操作(滚动到页面顶部),正如其他人所提到的。return false;

谷歌搜索“”提供了有关此主题的大量信息。其中一些,比如这个,提到了不使用 void(0) 的原因。javascript:void(0)

评论

2赞 AnthonyWJones 9/26/2008
这篇博文没有引用为什么应该避免使用javascript:void(0)的参考资料。
3赞 Peter Mortensen 5/31/2011
该链接现在(实际上)已断开。
2赞 Hrvoje Golcic 11/26/2019
辅助功能不好的解决方案:dequeuniversity.com/rules/axe/3.0/href-no-hash
0赞 Shannon Scott Schupbach 4/8/2020
javascript:void(0);如果您想使用禁用内联 JavaScript 的严格内容安全策略,也不好。
8赞 Peter #8

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

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

111赞 4 revs, 4 users 52%fijter #9

如果你问我,也不会;

如果你的“链接”的唯一目的是运行一些JavaScript代码,那么它就不符合链接的条件;而是一段带有 JavaScript 函数的文本。我建议使用一个带有附加标签和一些基本的 CSS 来模仿链接。链接是为导航而创建的,如果您的 JavaScript 代码不是用于导航的,则它不应该是标记。<span>onclick handler<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>

评论

137赞 AnthonyWJones 9/26/2008
此方法将“链接”限制为仅鼠标操作。可以通过键盘访问锚点,并在按下回车键时触发其“onclick”事件。
45赞 Hosam Aly 3/1/2009
在 CSS 中对颜色进行硬编码会阻止浏览器使用用户可能定义的自定义颜色,这可能是可访问性的问题。
38赞 redShadow 12/15/2011
<span>s 并不意味着做任何事情。nchors 并用于此!<A><buttons>
30赞 apnerve 12/28/2012
在这里使用是更好的选择,而使用 a 则不是。buttonsspan
0赞 Sebastian Simon 5/29/2021
“链接是为导航而建立的,如果你的 JavaScript 代码不是用于导航的,它就不应该是一个 <a> 标签。”— 即使 JavaScript 代码是“用于导航”的,链接也可能不是每次都合适。
18赞 3 revs, 3 users 80%Will Read #10

根据您想要完成的任务,您可以忘记 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)

评论

3赞 Benjol 9/26/2008
这样做的唯一缺点(从记忆中,我可能是错的)是,如果你里面没有 href,IE 不会认为 A 是 A。(所以CSS规则不起作用)
18赞 3 revs, 3 users 67%CleverPatrick #11

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

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

评论

1赞 AndFisher 1/18/2017
此外,如果您要用 替换 an,则需要记住通过键盘使其可聚焦。aspan
7赞 2 revs, 2 users 73%Shadow2531 #12

如果您使用链接作为执行某些 JavaScript 代码的一种方式(而不是使用像 D4V360 那样的跨度),只需执行以下操作:

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

如果您使用带有 onclick 的链接进行导航,请不要在 JavaScript 关闭时使用 href=“#” 作为回退。当用户点击链接时,通常很烦人。相反,如果可能,请提供 onclick 处理程序提供的相同链接。如果无法做到这一点,请跳过 onclick,只在 href 中使用 JavaScript URI。

评论

0赞 mplungjan 1/15/2012
如果 JS 处于关闭状态,而不是看似什么都不做或只是转到页面顶部,这将给出错误
1赞 Shadow2531 1/15/2012
@mplungjan 如果 JS 处于关闭状态,单击它将不执行任何操作,如果没有 JS 正在执行的非 js 替代表示/操作,这是有道理的。在我描述的情况下,将 href 设置为“#”或某些 URI 不再有用。
0赞 mplungjan 1/15/2012
所以有 href=“jsdisabled.html” 代替
0赞 Shadow2531 1/16/2012
@mplungjan你可以。但是,这会远离页面。
0赞 Shadow2531 1/17/2012
@mplungjan明白了。你可以这样做。那里没有争论。我个人只会有一个“此页面需要 JS”的消息,该消息在 JS 打开时会消失。
2304赞 6 revs, 5 users 76%AnthonyWJones #13

我用.javascript:void(0)

原因有三。鼓励在一组开发人员中使用不可避免地会导致一些人使用函数的返回值,如下所示:#

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

但是他们忘记在 onclick 中使用,而只是使用 .return doSomething()doSomething()

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

第三个原因是,在某些情况下,事件属性是动态分配的。我更喜欢能够调用函数或动态分配它,而不必专门为一种或另一种附加方法编写函数代码。因此,我在 HTML 标记中的(或任何东西)看起来像这样:onclickonclick

onclick="someFunc.call(this)"

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

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

因此,如果你是一个单独的开发人员,那么你可以清楚地做出自己的选择,但如果你作为一个团队工作,你必须声明:

使用 ,确保始终在末尾包含,任何调用的函数都不会抛出错误,如果将函数动态附加到属性,请确保它不仅不抛出错误,还返回 。href="#"onclickreturn false;onclickfalse

href="javascript:void(0)"

第二个显然更容易沟通。

评论

172赞 jakub.g 10/1/2013
快进到 2013 年:在启用了 CSP 的 HTTPS 页面上违反了内容安全策略。一种选择是在处理程序中使用 and,但我不太喜欢这个。也许您可以建立一个约定来使用并确保页面上没有元素具有 .这样,单击指向不存在的锚点的链接将不会滚动页面。javascript:void(0)href='#'event.preventDefault()href='#void'id="void"
35赞 Nathan 2/14/2014
您可以使用“#”,然后将单击事件绑定到所有链接,并将 “#” 作为 .这将在jQuery中完成:href$('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; });
6赞 CherryDT 2/16/2021
#void尽管如此,还是会向浏览器历史记录添加一个条目。另一种方法是使用返回 HTTP 状态 204 的资源的 URL(并且仍然使用 - 204 只是一个回退)。preventDefault
0赞 s3c 5/31/2021
@Nathan 非jquery:即在按键Enter(代码13)时包括事件侦听器,用于人们使用键盘浏览页面。const voidLinks = document.querySelectorAll('a[href="#"') for (const voidLink of voidLinks) { voidLink.addEventListener('click', e => { e.preventDefault ? e.preventDefault() : e.returnValue = false }) voidLink.addEventListener('keypress', e => { if (e.keyCode === 13) e.preventDefault ? e.preventDefault() : e.returnValue = false }) }
7赞 Sebastian Simon 2/6/2022
@HPWD 这是货物崇拜节目void运算符,而不是函数。它;“不执行任何操作”中的括号。 就像 说, . 不是有效的 UnaryExpression。void 0void(0)void()return ();()
7赞 2 revs, 2 users 80%Pablo Cabrera #14

如果你正在使用一个元素,只需使用这个:<a>

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

就我个人而言,我稍后会用 JavaScript 附加一个事件处理程序(使用或可能<把你最喜欢的 JavaScript 框架放在这里>)。attachEventaddEventListener

评论

7赞 Timo Huovinen 5/17/2012
有人能解释一下为什么这个答案有这么多反对票的原因吗?
1赞 Just a guy 3/15/2013
这个答案有人投了反对票,因为(如另一个回复中所述)将 javascript 放在实际标签中被认为是非常糟糕的做法。单击处理程序永远不应该出现在 HTML 本身中。最上面的答案最好地解释了这一点。
58赞 2 revs, 2 users 93%Fczbkk #15

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

这种方法的问题在于,如果该功能不起作用或出现任何问题,链接将变得不可点击。Onclick 事件将始终返回,因此不会调用普通 URL。false

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

JavaScript的

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

[HTML全文]

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

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

69赞 3 revs, 2 users 93%treat your mods well #16

我建议改用元素,特别是当控件应该在数据中产生更改时。(类似于 POST。<button>

如果你不显眼地注入元素,那就更好了,这是一种渐进式的增强。(请参阅此评论

评论

0赞 7/5/2021
这取决于您是否需要 HTML 的 BEM(块元素模型)上的按钮。
22赞 4 revs, 4 users 84%Andrew Moore #17

通常,您应该始终有一个回退链接,以确保禁用了 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 的用户就会被定向到,而使用 JavaScript 的查看者则会查看您的增强功能。search.php

22赞 3 revs, 3 users 88%naveen #18

最好使用jQuery,

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

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

锚标记标记将如下所示

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

很简单!

评论

5赞 Matt Kantor 7/22/2009
这就是我要说的。如果链接具有有意义的回退 URL,请使用该 URL。否则,只需省略 href 或使用比 <a> 更适合语义的东西。如果每个人都提倡包括 href 的唯一原因是让手指悬停,那么一个简单的“a { cursor: pointer; }”就可以了。
0赞 mtyaka 11/24/2009
我可以说这是 SO 决定采用的选项。例如,检查“标志”链接。
13赞 Nicolás 7/7/2010
这提供了可怕的可访问性。在 SO 中尝试一下:如果不使用鼠标,您就无法标记帖子。“链接”和“编辑”链接可以通过 Tab 键访问,但“标志”则不能。
6赞 Scott Rippey 6/18/2011
我同意这个选项。如果锚点除了 JavaScript 之外没有其他用途,则它不应该有 href。@Fatih:使用 jQuery 意味着如果禁用 JavaScript,则链接将没有指针。
3赞 Muhd 12/15/2011
如果你打算走这条路,为什么不也使用jQuery绑定点击呢?使用 jQuery 的部分好处是能够将 javascript 与标记分开。
10赞 3 revs, 3 users 84%Matt Goddard #19

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

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

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

正如我手头的,这里有一些jQuery可能会有所帮助:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);

评论

0赞 Matt Kantor 7/22/2009
LowPro 非常适合不显眼的 JS,如果你有很多复杂的行为。
11赞 2 revs, 2 users 80%Lukom #20

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

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

因此,用户将知道此链接的作用。

72赞 4 revs, 4 users 70%se_pavel #21

我使用以下内容

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

相反

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

评论

0赞 Sebastian Simon 5/29/2021
href="javascript:"并且都是等价的,但它们都同样糟糕。href="javascript:void 0;"
0赞 isherwood 1/20/2023
这个答案没有任何理由。秃头断言没有帮助。
39赞 5 revs, 4 users 45%Free Consulting #22

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

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

当然,“#”带有阻止默认操作的 onclick 处理程序会 [得多] 更好。此外,一个唯一目的是运行 JavaScript 的链接并不是真正的“链接”,除非你在出现问题时将用户发送到页面上的某个明智的锚点(只是 # 会发送到顶部)。您可以简单地使用样式表模拟链接的外观和感觉,而完全忘记 href。

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

53赞 Justin Johnson #23

#比 好,但以下更好:javascript:anything

HTML格式:

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

JavaScript的:

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

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

评论

2赞 Ry- 4/11/2014
@Muhd:返回应该在链接上激活...click
7赞 2 revs, 2 users 81%user394888 #24

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

使用 URL 重写,您可以使 URL 不仅可以在禁用 JavaScript 的情况下执行您想要执行的操作,还可以确切地告诉您它将执行哪些操作。

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

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

URL 重写教程

优点

  • 显示在状态栏中
  • 通过 JavaScript 中的 onclick 处理程序轻松升级到 Ajax
  • 实际上评论本身
  • 防止您的目录中充斥着一次性 HTML 文件

缺点

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

我敢肯定还有更多的缺点。随意讨论它们。

10赞 3 revs, 2 users 80%Peter Mortensen #25

这里还有一件更重要的事情要记住。符合第 508 条。 正因为如此,我觉得有必要指出,您需要 JAWS 等屏幕阅读器的锚点标签才能通过 Tab 键聚焦它。因此,“只使用 JavaScript 并忘记一开始就使用锚点”的解决方案不是其中某些选项。只有在您负担不起屏幕跳回顶部时,才需要在 href 中触发 JavaScript。你可以使用 settimeout 0 秒,让 JavaScript 触发到你需要关注的地方,但即使是 apage 也会跳到顶部,然后跳回来。

29赞 3 revs, 3 users 40%user564706 #26

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

78赞 3 revs, 3 users 40%Spammer Joe #27

使用只会做出一些有趣的动作,所以如果您想节省打字工作,我建议您使用。##selfJavaScript bla, bla,

评论

36赞 cHao 5/18/2013
作为参考,似乎并不特别。任何与文档中任何元素的名称或 ID 不匹配的片段标识符(并且不是空白或“顶部”)都应具有相同的效果。#self
0赞 Kafaa Billahi Syahida 5/20/2022
效果也一样,正如郝说的。您只需要在单击元素时返回 false (aonclick)
6赞 Jesse Atkinson #28

我强烈希望尽可能地将我的 JavaScript 排除在我的 HTML 标记之外。如果我使用 as click 事件处理程序,那么我建议使用 .<a><a class="trigger" href="#">Click me!</a>

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

需要注意的是,许多开发人员认为对点击事件处理程序使用锚标记并不好。他们希望你使用一个或一些CSS来增加它。这是一个争论不休的问题。<span><div>cursor: pointer;

13赞 3 revs, 2 users 62%Josh Simerman #29

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

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

下面是一个示例。Home/ChangePicture 是一个指向页面上表单的工作链接,其中包含用户界面和标准 HTML 提交按钮,但它看起来更好,注入到带有 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>

评论

0赞 eQ19 4/22/2015
在SEO方面,我更喜欢这种方式。使用尽可能多的友好 URL 肯定会提高页面价值因素。
8赞 5 revs, 2 users 81%Berker Yüceer #30

我从你的话中了解到,你想创建一个链接只是为了运行 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=“#” 将导致页面执行不需要的操作。

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

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

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

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

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});
350赞 5 revs, 4 users 58%Tracker1 #31

老实说,我建议两者都不建议。我会为这种行为使用风格化。<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。我还建议通过脚本绑定,而不是使用元素标签上的属性。唯一的问题是无法禁用的旧 IE 中的伪 3d 文本效果。onclick


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

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

注意:您可以用字符串替换 ,例如,它可以用作额外的指示器,显示点击的实际作用。0javascript:void('Delete record 123')

评论

54赞 mjsarfatti 3/14/2016
这个答案应该是最重要的。如果您遇到这种困境,那么您实际上可能需要一个.幸运的是,IE9 正在迅速失去市场份额,而 1px 的活跃效应应该不会阻止我们使用语义标记。 是一个链接,它旨在将您发送到某个地方,用于我们拥有的操作。button<a><button>
0赞 awe 9/29/2023
如果 onclick 中的操作将充当链接(导航到其他页面或在新窗口中打开某些内容),那么它在语义上应该是一个标签。如果操作是某个页面内弹出窗口或同一页面上的某些其他功能,则它应该是 .<a><button>
27赞 2 revs, 2 users 73%Eric Yin #32

我会使用:

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

原因:

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

评论

0赞 Berker Yüceer 12/30/2011
我不同意“1.”,因为在不允许使用脚本的情况下放置脚本链接时会出现错误。因此,这种链接应该与JS代码一起添加。这样,人们可以在不允许脚本时避免这些链接,并且根本不会看到任何错误。
808赞 17 revs, 5 users 69%balupton #33

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

  1. 它促进了突兀式 JavaScript 的实践——事实证明,这种 JavaScript 难以维护且难以扩展。在 Unobtrusive JavaScript 中对此进行了更多介绍。

  2. 你把时间花在编写令人难以置信的过于冗长的代码上——这对你的代码库几乎没有好处(如果有的话)。

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

不显眼的 JavaScript 方式

只是根本没有属性!任何好的 CSS 重置都会处理丢失的默认光标样式,因此这不是问题。然后使用优雅且不显眼的最佳实践来附加您的 JavaScript 功能 - 这些实践更易于维护,因为您的 JavaScript 逻辑保留在 JavaScript 中,而不是在您的标记中 - 当您开始开发大规模 JavaScript 应用程序时,这是必不可少的,这些应用程序需要将您的逻辑拆分为黑盒组件和模板。有关此内容的更多信息,请参阅大规模 JavaScript 应用程序体系结构href

简单的代码示例

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

笔记

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

  • 省略元素上的属性将导致 Internet Explorer 6 和 Internet Explorer 7 不采用样式,这就是为什么我们添加了一个简单的 JavaScript 填充码来代替通过以下方式实现此目的。这是完全可以的,因为如果你没有 href 属性并且没有优雅的降级,那么你的链接无论如何都不会起作用 - 你会有更大的问题需要担心。hrefaa:hovera.hover

  • 如果你希望你的操作在禁用 JavaScript 的情况下仍然有效,那么使用一个带有属性的元素,该元素将转到某个 URL 中,该 URL 将手动执行该操作,而不是通过 Ajax 请求或任何应该要走的路。如果你正在这样做,那么你要确保你做一个点击调用,以确保当按钮被点击时,它不会跟随链接。此选项称为正常降级。ahrefevent.preventDefault()

评论

0赞 DoomerDGR8 11/22/2022
那么将参数传递给最终的 JS 方法呢?可能吗?
3赞 4 revs, 3 users 76%Timo Huovinen #34

为了完整起见,这里还有一个选项,即使禁用了 JavaScript,它也可以防止链接执行任何操作,而且:)很短

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

如果 ID 不在页面上,则该链接将不执行任何操作。

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

评论

4赞 Andy E 5/16/2012
在 HTML5 中,取消了对 ID 的大多数限制,因此它们可以以数字开头。现在唯一的限制是它们必须是唯一的,不能包含空格。请参阅 whatwg.org/specs/web-apps/current-work/multipage/...。此外,您的解决方案会修改 URL 并插入历史记录条目,从而用无用的状态污染后退按钮。
3赞 Timo Huovinen 5/16/2012
@AndyE是的,你的权利,我不知道 id 可以以数字开头,而且这个解决方案从来都不是好或推荐的,我添加它是为了“完整性”在方法的数量上。
8赞 3 revsdazbradbury #35

我看到很多想要继续使用值的人的答案,因此,这里有一个希望满足两个阵营的答案:#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) {

15赞 2 revs, 2 users 88%Stacks on Stacks on Stacks #36

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

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

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

对于 HTML,链接很简单

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

我不喜欢使用哈希标签,除非它们用于锚点,而且我只在有两个以上的假链接时才做上述操作,否则我会使用 javascript:void(0)。

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

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

8赞 2 revs, 2 users 82%vol7ron #37

您可以使用 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

});

评论

2赞 squidbe 3/4/2014
这很糟糕,尤其是在 IE 中(直到版本 10,不确定 11)。单击带有空 href 的链接会导致触发不必要(并且可能是不需要的)请求,并且在 IE 中,它会尝试打开 Windows 资源管理器。
0赞 vol7ron 6/3/2014
@squidbe:这是一个古老的答案,但我认为这取决于你的JS是如何编写的。如果你不想触发它,我想你会并且必须返回run_foo或者只是在调用函数后添加一行。这个答案的重点是,当启用 JS 时,您可以删除 href 标签。理想的解决方案是使用最有可能指向服务器端呈现页面的故障安全链接填充 hrefonclick="return run_foo()"falsereturn falsehref="render/full_page.script?arg=value" onclick="loadAJAXContent.call(this); return false"
0赞 squidbe 6/3/2014
您对故障安全解决方案的看法是正确的。我的观点是 href 属性值不应该是一个空字符串,将其设置为空可能会导致不必要的副作用。即使返回 false,如果脚本中存在错误,仍会发生不需要的请求和不需要的 Windows 行为。如果选项是在将哈希保留在 href 中并通过脚本删除它之间,我认为最好保留它。
6赞 G. Ghez #38

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

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

然后你就有了一个干净的 HTML 文件,易于加载(并且对 seo 友好),没有成千上万的href="javascript:void(0);"href="#"

评论

0赞 user428517 8/12/2013
这并不能回答如何处理 .如果您的代码上没有属性,则该代码不会显示为可点击链接。hrefhrefa
0赞 ryabenko-pro 10/22/2013
但是,如果有一个元素列表,并且我想添加链接以通过字符串 ID 从中删除某些元素怎么办?
19赞 2 revswhirlwin #39

如果你碰巧使用的是 AngularJS,你可以使用以下命令:

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

这不会做任何事情。

另外

  • 它不会像 (#) 那样将您带到页面顶部
    • 因此,您不需要使用 JavaScript 显式返回false
  • 它简明扼要

评论

6赞 Henry Hu 7/30/2013
但这会导致页面重新加载,并且由于我们总是使用 javascript 来修改页面,这是不可接受的。
0赞 whirlwin 7/30/2013
@HenryHu我发现它没有重新加载的原因是因为 AngularJS。请参阅我更新的答案。
24赞 2 revs, 2 users 84%Ashish Kumar #40

因此,当你用标签做一些 JavaScript 事情时,如果你也放了标签,你可以在事件末尾添加 return false(在内联事件绑定的情况下),例如:<a />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>

您可以简单地使用 a 代替来做一些事情或任何其他元素,例如 b、span 或任何适合您的元素,因为您可以在所有元素上添加事件。<button />


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

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

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

10赞 2 revs, 2 users 84%Vinny Fonseca #41

我使用 href=“#” 作为我想要虚拟行为的链接。然后我使用以下代码:

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

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

10赞 2 revs, 2 users 76%Anders M. #42

我想说最好的方法是将 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,我认为这很重要,因为如果您的网站突然开始选择链接周围的内容,它就会显得不专业。

17赞 4 revs, 3 users 82%mdesdev #43

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

[HTML全文]

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

用一点点jQuery

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

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

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

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

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

然后,使用包装在正文中、标记之前或外部 JavaScript 文档中的脚本将函数分配给。.link</body>

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

*注意:对于动态创建的元素,请使用:

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

对于使用动态创建的元素创建的元素,请使用:

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

然后,你可以用一点 CSS 来设置 span 元素的样式,使其看起来像一个锚点:

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

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

8赞 AlxGol #44

为什么不使用它呢?这不会向上滚动页面。

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

评论

0赞 Alex Yorke 12/30/2014
这实际上似乎是一个非常好的解决方案,谢谢。我已经替换了 everywhere,然后停留在 CSS 中,这似乎运行良好,不需要不必要的 JS :)href="#"role="button"*[role="button"] { cursor:pointer; }
0赞 Martin 3/14/2017
正如其他人所说,这不能使用键盘激活。
0赞 Hrvoje Golcic 11/26/2019
是的,按 TAB 键时无法导航到它。使用可能会使它变得更好,但我不确定这是合适的解决方案tabindex="0"
0赞 AlxGol 11/27/2019
答案 5 年后,我还考虑了 a11y 功能:)
0赞 Sebastian Simon 5/29/2021
@HrvojeGolcic 使用时请注意辅助功能问题tabindex
32赞 dnetix #45

我通常会去

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

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

26赞 Garrett #46

不要仅出于运行 JavaScript 的目的而使用链接。

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

请改用链接以外的元素:

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

并使用 CSS 设置样式:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

评论

20赞 Quentin 6/15/2016
使用按钮,而不是跨度。按钮自然地按焦点顺序排列,因此无需鼠标/触控板/等即可访问。
5赞 Tsundoku 7/25/2017
补充大量 Quentin 的评论:正如目前所写的那样,键盘用户不会接触到该元素,因为它是一个不可聚焦的元素。这就是为什么你需要一个按钮。span
3赞 Useless Code 11/22/2017
您可以通过增加跨度来使其可聚焦。也就是说,使用按钮更好,因为它可以免费为您提供所需的功能。若要使用跨度访问它,您不仅需要附加一个单击处理程序,还需要附加一个键盘事件处理程序,该处理程序查找按空格键或回车键,然后触发正常的单击处理程序。您还需要将第二个 CSS 选择器更改为,以便元素具有焦点这一事实是显而易见的。tabindex="0".funcActuator:hover, .funcActuator:focus
17赞 2 revs, 2 users 67%user6460587 #47

我使用开发人员工具在谷歌浏览器中尝试了这两种方法,花了 0.32 秒。而该方法仅花费了 0.18 秒。因此,在谷歌浏览器中,工作得更好更快。id="#"javascript:void(0)javascript:void(0)

评论

0赞 Jochen Schultz 9/21/2017
实际上,他们不这样做。# 使你跳转到页面顶部。
16赞 2 revsdjpalme #48

在现代网站上,如果元素只执行 JavaScript 功能(而不是真正的链接),则应避免使用 href。

为什么? 此元素的存在告诉浏览器这是指向目标的链接。 这样,浏览器将显示“在新选项卡/窗口中打开”功能(当您使用 shift+click 时也会触发)。 这样做将导致打开同一页面时没有触发所需的功能(导致用户感到沮丧)。

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

唯一的缺点: 删除 HREF 将删除 tabindex。 为了解决这个问题,你可以使用一个样式化为链接的按钮,或者使用JS添加一个tabindex属性。

-2赞 Charlie #49

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

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

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

9赞 2 revs, 2 users 95%Lyes CHIOUKH #50

于2019年1月编辑

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

如果 a 元素没有 href 属性,则该元素表示一个占位符,该占位符表示链接可能已放置在何处(如果它是相关的),仅由元素的内容组成。

例:

<a>previous</a>

如果在那之后你想做其他事情:

1 - 如果您的链接没有转到任何地方,请不要使用元素。使用一个或其他合适的东西,并添加CSS来设置你的样式。<a><span>:hover

2 - 如果您想保持原始、精确和快速,请使用 OR。javascript:void(0)javascript:undefinedjavascript:;

3赞 2 revs, 2 users 50%SchoolforDesign #51

• is void to null value [未赋值],表示您的浏览器将点击进入 DOM,窗口返回 false。
• 不遵循 javascript 中的 DOM 或 Window。这意味着锚点 href 内的“#”符号是一个 LINK。链接到相同的电流方向。
Javascript: void(0);NULL'#'

5赞 Javed Khan #52

您可以在此处使用 javascript:void(0) 而不是使用 # 来停止锚标记重定向到标题部分。

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

评论

0赞 ZenAtWork 8/18/2022
如果使用“#”并且不希望重定向,则只需确保事件触发的任何 onclick 行为都返回 false 作为其最终返回值。这将阻止在单击事件完成冒泡后进行导航。它甚至可以是一些愚蠢的东西,比如 onclick=“return console.log('我是一个毫无价值的链接!')”(控制台日志的计算结果为 undefined,这将产生一个 falsey 值)。void(0) 只是一个老式的语法,用于获得真正的未定义响应。
10赞 Dev pokhariya #53

最简单和大家最常用的是javascript:void(0),你可以用它来代替使用#来停止标签重定向到标题部分

<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>

function testFunction() {
    alert("hello world");
}

评论

0赞 7/5/2021
如果使用需要检测 JavaScript 并使用 Function for Dectect 浏览器版本的版本 ,则可以改用 # ''' <a href=“javascript:void(0)” onclick=“testFunction();”>点击查看 </a> function testFunction() { alert(“hello, world”) } '''
4赞 3 revsStokely #54

这里实际上有四个选项

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

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

下面是当今更流行的设计,用于内部属性。如果浏览器不支持编写脚本,则应再次发布回其页面,因为会为超链接路径返回空字符串。如果您不关心谁支持 JavaScript,请使用此选项。javascript:void(0)hrefhref

<a href="javascript:void(0);" onclick="alert('hello world!');">My Link</a>
2赞 Nedim AKAR #55

javascript:void(0)将来会弃用,因此您应该使用 .#

0赞 Muhammad Asadullah #56

答:这两种方法对网站的加载速度都没有明显的影响。

解释:好吧,两者都同样有效。主要区别与点击操作有关。第一种方法 () 会将地址栏中的 URL 更改为“#,”。第二种方法 () 将使地址栏中的 URL 保持不变。因此,两者都很好。

提示:使用第二种方法作为最佳实践,即:因为它是更有效的 HTML,并且不会影响 URL 栏。(<a href="javascript:void(0)">)