我应该为 JavaScript 链接使用哪个 “href” 值,“#”或“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>

答案

我使用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)"

第二种显然更容易沟通。

都不行

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

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

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

查看Unobtrusive JavaScriptProgressive 增强功能 (均为 Wikipedia)。

进行<a href="#" onclick="myJsFunc();">Link</a><a href="javascript:void(0)" onclick="myJsFunc();">Link</a>或包含onclick属性的所有其他内容 - 早在 5 年前就可以了,尽管现在这可能是个坏习惯。原因如下:

  1. 它促进了侵入性 JavaScript 的实践 - 事实证明,JavaScript 难以维护且难以扩展。 Unobtrusive 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 的做法,并且在少量的代码中,一个组件可以在页面上重复多次,而不会在不同的组件实例之间产生副作用或冲突。惊人!

笔记

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

  • a元素上省略href属性将导致Internet Explorer 6Internet Explorer 7不采用a:hover样式,这就是为什么我们添加了一个简单的 JavaScript shim 来通过a.hover来完成此操作的a.hover 。完全可以,就像您没有 href 属性且没有正常降级一样,您的链接也将无法正常工作 - 而且您会担心更大的问题。

  • 如果您希望您的操作在禁用 JavaScript 的情况下仍能正常工作,则可以使用具有href属性a元素, a元素具有一些 URL,该 URL 将手动执行操作,而不是通过 Ajax 请求或其他方法执行。如果执行此操作, event.preventDefault()确保在单击调用上执行event.preventDefault() ,以确保单击按钮时它不会跟随该链接。此选项称为正常降级。

'#'会将用户带回到页面顶部,因此我通常选择void(0)

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

老实说,我都不建议。对于该行为,我将使用风格化的<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。我还建议通过脚本进行绑定,而不要使用 element 标签上的onclick属性。唯一的难题是无法禁用的较旧 IE 中的伪 3d 文本效果。


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

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

注意:您可以将0替换为诸如javascript:void('Delete record 123')类的字符串,该字符串可以用作额外的指示符,用于显示点击实际执行的操作。

第一个,理想情况下带有真实链接,以防用户禁用 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

你也不要问我。

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

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

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

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

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

我用以下

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

代替

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