小编典典

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

spring

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

阅读 408

收藏
2020-04-23

共2个答案

小编典典

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

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

  • 万一你的onclick事件失败,它将始终拦截。
  • 不会发生错误的加载调用,也不会基于哈希更改触发其他事件
  • 如果单击失败(onclick抛出),则hash标签可能会导致意外的行为,请避免使用它,除非它是适当的失败行为,并且你要更改导航历史记录。
    注意:你可以将替换为0一个字符串,例如,javascript:void('Delete record 123')它可以作为一个额外的指示符,显示点击实际执行的操作。
2020-04-23
小编典典

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

第二种显然更容易沟通。

2020-04-23