我应该为 JavaScript 链接使用哪个“href”值，“#”还是“javascript:void(0)”？

Posted 2023-03-05

【中文标题】我应该为 JavaScript 链接使用哪个“href”值，“#”还是“javascript:void(0)”？

【英文标题】：Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

【发布时间】：2010-09-13 04:28:37

【问题描述】：

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

【参考方案1】：

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

javascript:; 的行为也类似于 javascript:void(0);

【讨论】：

避免这种情况的方法是在 onclick 事件处理程序中返回 false。

在事件处理程序中返回 false 并不能避免如果 JavaScript JS 没有成功运行。

使用“#someNonExistantAnchorName”效果很好，因为它无处可跳转。

如果您有基本 href，那么 # 或 #something 会将您带到 基本 href 页面上的锚点，而不是当前页面。

shebang (#!) 可以解决问题，但这绝对是不好的做法。

【参考方案2】：

第一个，最好有一个真实的链接，以防用户禁用 JavaScript。只要确保返回 false 以防止在 JavaScript 执行时触发 click 事件。

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

如果你使用 Angular2，这种方式可行：

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

请看这里https://***.com/a/45465728/2803344

【讨论】：

所以在启用了 JavaScript 且支持此功能的用户代理中运行一个 JavaScript 函数，回退（对于 JS 因任何原因失败的用户代理）到页面顶部的链接？这很少是一个明智的后备。

“如果用户禁用了 JavaScript，最好有一个真正的链接可以跟随”，它应该转到一个有用的页面而不是#，即使它只是解释该站点需要 JS 才能工作。至于失败，我希望开发人员在部署之前使用适当的浏览器功能检测等。

【参考方案3】：

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

【参考方案4】：

除非您使用 JavaScript 写出链接（以便您知道它已在浏览器中启用），否则理想情况下，您应该为禁用 JavaScript 浏览的用户提供正确的链接，然后阻止链接的默认操作在您的 onclick 事件处理程序中。这样，启用 JavaScript 的用户将运行该功能，而禁用 JavaScript 的用户将跳转到适当的页面（或同一页面内的位置），而不是仅仅单击链接而没有任何反应。

【参考方案5】：

两者都不是。

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

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

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

查看 Unobtrusive JavaScript 和 Progressive enhancement（均为***）。

【讨论】：

“如果那不可能，那么”使用一个按钮。这个答案应该是这样结束的。

【参考方案6】：

理想情况下你会这样做：

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

或者，更好的是，您可以在 HTML 中使用默认操作链接，并且您可以在 DOM 呈现后通过 JavaScript 不显眼地将 onclick 事件添加到元素，从而确保如果 JavaScript 不存在/未使用您不要让无用的事件处理程序混淆您的代码并可能混淆（或至少分散注意力）您的实际内容。

【参考方案7】：

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

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

【讨论】：

博客条目没有引用关于为什么应该避免使用 javascript:void(0) 的参考。

链接现在（有效地）断开了。

可访问性不好的解决方案：dequeuniversity.com/rules/axe/3.0/href-no-hash

如果您想使用禁用内联 JavaScript 的严格内容安全策略，

javascript:void(0); 也不好。

【参考方案8】：

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

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

【参考方案9】：

如果你问我也不行；

如果您的“链接”的唯一目的是运行一些 JavaScript 代码，则它不属于链接；而是一段带有 JavaScript 函数的文本。我建议使用带有onclick handler 的<span> 标签和一些基本的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>

【讨论】：

这种方法将“链接”限制为仅限鼠标操作。可以通过键盘访问锚点，并在按下 Enter 键时触发其 'onclick' 事件。

在 CSS 中硬编码颜色会阻止浏览器使用用户可能定义的自定义颜色，这可能是可访问性的问题。

<span>s 并不意味着做任何事情。 <A>nchors 和 <buttons> 用于此目的！

在这里使用buttons 是更好的选择，而使用span 则不是。

“链接是为导航而创建的，如果您的 JavaScript 代码不是用于导航，则它不应该是 <a> 标记。” — 即使 JavaScript 代码是“用于导航”，链接可能不适合每次。

【参考方案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)。如果您有一张想要发生鼠标悬停事件的图像，但没有任何内容可供用户点击，则效果很好。

【讨论】：

唯一的缺点（从记忆中，我可能错了）是如果你没有href，IE不会认为A是A。 （所以 CSS 规则不起作用）

【参考方案11】：

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

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

【讨论】：

此外，如果您要将 a 替换为 span，则需要记住通过键盘使其可聚焦。

【参考方案12】：

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

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

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

【讨论】：

如果 JS 关闭而不是看似什么都不做或只是转到页面顶部，这将给出错误

@mplungjan 如果 JS 处于关闭状态，则单击它不会执行任何操作，如果 JS 正在执行的操作没有非 js 替代表示/操作，这是有道理的。在我描述的情况下，将 href 设置为“#”或某个 URI 不再有用。

所以有 href="jsdisabled.html" 代替

@mplungjan 你可以。但是，这会离开页面。

@mplungjan 明白了。你可以这样做。那里没有争论。我个人只是有一个“这个页面需要 JS”的消息，当 JS 打开时，页面会消失。

【参考方案13】：

我使用javascript:void(0)。

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

function doSomething() 
    //Some code
    return false;

但后来他们忘记在 onclick 中使用return doSomething()，而只使用doSomething()。

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

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

onclick="someFunc.call(this)"

或

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

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

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

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

或

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

第二个显然更容易沟通。

【讨论】：

快进到 2013 年：javascript:void(0) 在启用 CSP 的 HTTPS 页面上违反了Content Security Policy。一种选择是在处理程序中使用href='#' 和event.preventDefault()，但我不太喜欢这个。也许您可以建立一个约定来使用href='#void'，并确保页面上的任何元素都没有id="void"。这样，单击指向不存在锚点的链接将不会滚动页面。

您可以使用“#”，然后将点击事件绑定到所有带有“#”的链接作为href。这将在 jQuery 中完成：$('a[href="#"]').click(function(e) e.preventDefault ? e.preventDefault() : e.returnValue = false; );

#void 仍然会在浏览器历史记录中添加一个条目。另一种方法是使用返回 HTTP 状态 204 的资源的 URL（并且仍然使用 preventDefault - 204 只是一个后备）。

@Nathan Non-jquery: 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 ) 这包括按键 Enter（代码 13）上的事件侦听器，用于人们使用键盘浏览页面。

@s3c 回车键已经触发了点击事件，那么最后一个监听器有必要吗？

【参考方案14】：

如果您使用的是<a> 元素，请使用以下内容：

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

我个人稍后会附加一个带有 JavaScript 的事件处理程序（使用 attachEvent 或 addEventListener 或者也许）。

【讨论】：

有人可以解释为什么这个答案有这么多反对意见吗？

这个答案有很多人反对，因为（如其他回复中所述）将 javascript 放在实际标签中被认为是非常糟糕的做法。点击处理程序不应该在 HTML 本身中。最佳答案最详细地解释了这一点。

【参考方案15】：

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

这种方法的问题是，如果功能不起作用或出现任何问题，链接将无法点击。 onclick 事件会一直返回false，所以不会调用正常的URL。

有一个非常简单的解决方案。如果它工作正常，让函数返回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() 函数的结果。如果它有效，它将返回true，因此它将被否定（false）并且不会调用path/to/some/URL。如果函数将返回false（例如，浏览器不支持函数中使用的某些内容或其他任何错误），则将其取反为true，并调用path/to/some/URL。

【参考方案16】：

我建议改用<button> 元素，尤其是，如果控件应该对数据产生变化。 （类似于 POST。）

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

【讨论】：

这取决于您是否需要 html 的 bem（块元素模型）上的按钮。

【参考方案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 的人会被定向到 search.php，而使用 JavaScript 的观众会看到您的增强功能。

【参考方案18】：

最好用jQuery，

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

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

锚标记标记将类似于

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

够简单！

【讨论】：

这就是我要说的。如果链接有一个有意义的后备网址，请使用它。否则，只需省略 href 或使用比 在语义上更合适的东西。如果每个人都提倡包括 href 在内的唯一原因是让手指悬停，那么简单的“a cursor: pointer; ”就可以解决问题。

我可以说这是 SO 决定采用的选项。例如，检查“标志”链接。

这提供了可怕的可访问性。在 SO 中尝试：不使用鼠标就无法标记帖子。 “链接”和“编辑”链接可以通过 Tab 键访问，但“标志”不是。

我同意这个选项。如果锚点除了 JavaScript 之外没有其他用途，那么它不应该有 href。 @Fatih：使用 jQuery 意味着如果 JavaScript 被禁用，链接将没有指针。

如果你要走这条路，为什么不使用jQuery绑定点击呢？使用 jQuery 的部分好处是能够将 javascript 与标记分开。

【参考方案19】：

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

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

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

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

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

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

【讨论】：

如果你有很多复杂的行为，LowPro 非常适合不显眼的 JS。

【参考方案20】：

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

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

这样用户就会知道这个链接的作用。

【参考方案21】：

我使用以下

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

改为

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

【讨论】：

href="javascript:" 和 href="javascript:void 0;" 也都是等价的，但它们都同样糟糕。

【参考方案22】：

绝对哈希 (#) 更好，因为在 JavaScript 中它是一个伪方案：

污染历史 实例化引擎的新副本 在全局范围内运行并且不考虑事件系统。

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

另外，关于cowgod的建议，特别是这个：...href="javascript_required.html" onclick="...这个方法很好，但是它没有区分“JavaScript disabled”和“onclick failed”两种情况。

【参考方案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 属性和协议被认为是不好的形式。

【讨论】：

@Muhd：返回应该在链接上激活click...

【参考方案24】：

与整体观点完全一致，需要时使用void(0)，需要时使用有效网址。

使用URL rewriting，您可以使 URL 不仅可以在禁用 JavaScript 的情况下执行您想做的事情，而且还可以准确地告诉您它要做什么。

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

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

URL rewriting tutorials

优点

显示在状态栏中 通过 JavaScript 中的 onclick 处理程序轻松升级到 Ajax 实际上是自我调整 防止您的目录被一次性使用的 HTML 文件弄得乱七八糟

缺点

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

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

【参考方案25】：

这里还有一件更重要的事情要记住。 Section 508 合规性。 正因为如此，我觉得有必要指出您需要屏幕阅读器的锚标记，例如JAWS，以便能够通过选项卡对其进行聚焦。因此，“只使用 JavaScript 并忘记开头的锚点”的解决方案不是其中一些选项。仅当您无法让屏幕跳回顶部时，才需要在 href 中触发 JavaScript。您可以使用 0 秒的 settimeout 并将 JavaScript 触发到您需要关注的位置，但即使是 apage 也会跳到顶部然后返回。

【参考方案26】：

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

【参考方案27】：

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

【讨论】：

作为参考，#self 似乎并不特别。任何与文档中任何元素的名称或 id 不匹配的片段标识符（并且不是空白或“顶部”）都应该具有相同的效果。

【参考方案28】：

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

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

值得注意的是，许多开发人员认为将锚标记用于点击事件处理程序并不好。他们希望您使用 <span> 或 <div> 和一些添加 cursor: pointer; 的 CSS。这是一个争论不休的问题。

【参考方案29】：

我基本上是在转述this practical article using progressive enhancement。 简短的回答是你永远不要使用javascript:void(0); 或#，除非你的用户界面已经推断出JavaScript 已启用，在这种情况下你应该使用javascript:void(0);。另外，不要使用 span 作为链接，因为这在语义上是错误的。

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

这是一个示例。 Home/ChangePicture 是页面上的表单的工作链接，带有用户界面和标准的 HTML 提交按钮，但它看起来更好地注入到带有 jQ​​ueryUI 按钮的模式对话框中。无论哪种方式都有效，具体取决于满足移动优先开发的浏览器。

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

【讨论】：

在 SEO 方面我更喜欢这种方式。使用尽可能多的友好 URL 肯定会提高页面价值因素。

【参考方案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="#" 会导致页面执行不需要的操作。

另外，<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>')
);