以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?

函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>

or

函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>


当前回答

这里还有一件更重要的事情要记住。第508节合规性。因此,我觉得有必要指出,您需要为JAWS等屏幕阅读器提供锚标记,以便能够通过选项卡将其聚焦。因此,解决方案“只使用JavaScript,忘记开头的锚”并不是其中的一个选项。只有当您无法让屏幕跳回到顶部时,才需要在href中启动JavaScript。您可以使用0秒的设置超时,让JavaScript在需要关注的地方启动,但即使是页面也会跳到顶部然后返回。

其他回答

因此,当您使用<a/>标记执行某些JavaScript操作时,如果您也放入href=“#”,则可以在事件末尾添加return false(如果是内联事件绑定),如:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

或者您可以使用JavaScript更改href属性,如:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

or

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

但从语义上讲,上述所有实现这一点的方法都是错误的(尽管它很好)。如果没有创建任何元素来导航页面,并且有一些JavaScript内容与之相关,那么它不应该是<a>标记。

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


因此,使用<a href=“#”>有一个好处。在执行a href=“#”时,默认情况下会在该元素上获得光标指针。为此,我认为您可以使用CSS,比如cursor:pointer;这也解决了这个问题。

最后,如果您从JavaScript代码本身绑定事件,那么如果您使用的是<a>标记,则可以使用event.prpreventDefault()来实现这一点,但如果您没有使用<a>标签,则可以获得一个优势,您不需要这样做。

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

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

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

不要将链接仅用于运行JavaScript。

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

而是使用链接以外的元素:

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

并使用CSS设置样式:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

我使用javascript:void(0)。

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

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

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

避免#的第二个原因是最终返回为false;如果被调用的函数抛出错误,则不会执行。因此,开发人员还必须记住正确处理调用函数中的任何错误。

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

onclick="someFunc.call(this)"

OR

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

使用javascript:void(0)避免了上述所有麻烦,而且我还没有发现任何缺点的例子。

因此,如果你是一个独立的开发人员,那么你可以明确地做出自己的选择,但如果你是团队成员,你必须声明:

使用href=“#”,确保onclick始终包含return false;最后,任何被调用的函数都不会抛出错误,如果您将一个函数动态地附加到onclick属性,请确保它不会抛出错误并返回false。

OR

使用href=“javascript:void(0)”

第二种显然更容易沟通。

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

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