将 JavaScript 代码放入 <a> 的不同方法之间有什么区别?

IT技术 javascript html href
2021-02-10 04:56:34

我见过以下将 JavaScript 代码放入<a>标签的方法:

function DoSomething() { ... return false; }
  1. <a href="javascript:;" onClick="return DoSomething();">link</a>
  2. <a href="javascript:DoSomething();">link</a>
  3. <a href="javascript:void(0);" onClick="return DoSomething();">link</a>
  4. <a href="#" onClick="return DoSomething();">link</a>

我理解尝试放置有效 URL 而不仅仅是 JavaScript 代码的想法,以防万一用户没有启用 JavaScript。但出于本次讨论的目的,我需要假设 JavaScript 已启用(没有它他们无法登录)。

我个人喜欢选项 2,因为它允许您查看将要运行的内容——在调试有参数传递给函数的位置时尤其有用。我已经使用了很多,还没有发现浏览器问题。

我读过人们推荐 4,因为它为用户提供了一个真实的链接,但实际上,# 不是“真实的”。它绝对不会去任何地方。

当您知道用户启用了 JavaScript 时,是否有不支持或非常糟糕的内容?

相关问题:JavaScript 链接的 Href:“#”或“javascript:void(0)”?.

6个回答

我非常喜欢Matt Kruse 的 Javascript 最佳实践文章在其中,他指出使用该href部分来执行 JavaScript 代码是一个坏主意。即使您已经声明您的用户必须启用 JavaScript,也没有理由不能拥有一个简单的 HTML 页面,以便href在有人在登录后碰巧关闭 JavaScript 时,您的所有 JavaScript 链接都可以指向他们的部分。我强烈建议您仍然允许这种回退机制。这样的事情将坚持“最佳实践”并实现您的目标:

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
Matt Kruse 的javascripttoolbox.com似乎已离线出售。
2021-03-22 04:56:34
您可以使用 title 属性覆盖此值,例如 <a href="javascript_required.html" title="Does Something" onclick="doSomething(); return false;">go</a>
2021-03-25 04:56:34
您是否考虑过对 SEO 的后果?
2021-03-31 04:56:34
最好的做法是将请求记录到 javascript_required.html 页面并记录导致错误的函数。
2021-04-03 04:56:34
因为 href 值将在状态栏中显示给用户?(底部的栏)我会考虑使用更用户友好的链接,例如。"js.html?doSomething" 页面仍然可以是静态 html。这样用户将清楚地看到链接之间的差异。
2021-04-07 04:56:34

当您可以使用addEventListener/时,您为什么要这样做attachEvent如果没有href-equivalent,请不要使用 an <a>,使用 a<button>并相应地设置样式。

在许多情况下,使用按钮而不是链接并不是一个可行的选择。
2021-03-18 04:56:34
跨度不能以键盘为中心。
2021-03-28 04:56:34
因为长得丑。您可以在链接旁边添加一个图标。它们很难跨浏览器格式化。通常,人们正在转向链接而不是按钮——看看大多数堆栈溢出。
2021-03-30 04:56:34
长得丑吗?它看起来像你想要的样子。事实上,我认为按钮实际上比链接具有更多的样式灵活性,因为它们是内联的,但可以跨浏览器正确填充。任何可以用链接完成的事情都可以用按钮完成,就 CSS 而言。
2021-04-03 04:56:34
按钮在语义上是(喘息)正确的。跨度在语义上没有意义。语义上讲,按钮正是作者打算使用的。
2021-04-06 04:56:34

你忘记了另一种方法:

5: <a href="#" id="myLink">Link</a>

使用 JavaScript 代码:

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

我无法评论哪些选项支持最好,哪些在语义上最好,但我只想说我更喜欢这种风格,因为它将您的内容与您的 JavaScript 代码分开。它将所有 JavaScript 代码保存在一起,这更容易维护(尤其是当您将其应用于许多链接时),您甚至可以将其放在一个外部文件中,然后可以将其打包以减少文件大小并由客户端浏览器缓存。

如果你有 20 或 30 个不同的 JS 链接,这会变得非常乏味,最终会出现很多 JS。
2021-03-13 04:56:34
不在乎,trololo,在 ABC 和 D 之间进行选择时,不会选择 E。
2021-03-13 04:56:34
@JKirchartz 如果答案背后有原因,我不明白它是如何讲道的。如果你读到这个问题,它真的是“这 4 个中哪一个最好”,我只是指出他没有考虑过另一个选项。
2021-03-23 04:56:34
@JKirchartz 是的,我认为您当时并没有真正了解 Stack Overflow 的目的。如果有人问“哪个更好地构建 Web 应用程序:Cobol 还是 Fortran?” 告诉那个人他们还没有考虑所有的可能性是可以接受的。问题显然不是问“这四件事中一件最好”。
2021-04-03 04:56:34
这并不比通过 HTML 来更改 javascript 更乏味。...或者您可以使用类似 jQuery 的东西,它可以轻松地一次更改多个元素上的事件... $('#menu a').click(function() { .. })
2021-04-10 04:56:34
<a href="#" onClick="DoSomething(); return false;">link</a>

我会这样做,或者:

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

视情况而定。对于较大的应用程序,第二个是最好的,因为它可以整合您的事件代码。

如果你有 20 或 30 个不同的 JS 链接,这会变得非常乏味,最终会出现很多 JS。
2021-03-24 04:56:34
潜入您代码中的错误可能非常难以调试。正如您的第一个示例所证明的那样,这些错误很容易出现。:)
2021-04-12 04:56:34

方法#2 在 FF3 和 IE7 中存在语法错误。我更喜欢方法#1 和#3,因为#4 用'#' 弄脏了URI,虽然会导致更少的输入......显然,正如其他响应所指出的,最好的解决方案是将html 与事件处理分开。

@Diodeus,我相信 Pier 指的是问题中的编号列表,自从问题首先发布以来,它实际上一直存在。
2021-03-30 04:56:34
方法#2 什么?问题的顺序与您看到它们时的顺序不同。
2021-04-05 04:56:34
方法#4不会弄乱URI,如果你一定要return false出于这个原因,方法#4 可能是最好的(列出的那些)。
2021-04-05 04:56:34