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

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

or

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


当前回答

我同意其他地方的建议,即应该在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),路径/to/some/URL将不会被调用。如果函数返回false(例如,浏览器不支持函数中使用的内容或其他任何错误),则将其否定为true,并调用路径/to/some/URL。

其他回答

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

我通常会去

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

它比javascript:void(0)短,并且做了同样的事情。

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

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

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

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

并使用CSS设置样式:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

除非您使用JavaScript编写链接(这样您就知道它在浏览器中已启用),否则理想情况下,您应该为禁用JavaScript的浏览者提供适当的链接,然后在onclick事件处理程序中阻止该链接的默认操作。这样,启用JavaScript的用户将运行该功能,而禁用JavaScript的用户则将跳转到适当的页面(或同一页面中的位置),而不是只单击链接而不发生任何事情。

我想说,最好的方法是将href锚定到一个你从未使用过的ID上,比如#Do1Not2Use3This4Id5或类似的ID,你100%确信没有人会使用,也不会冒犯他人。

Javascript:void(0)是一个坏主意,违反了启用CSP的HTTPS页面上的内容安全策略https://developer.mozilla.org/en/docs/Security/CSP(感谢@jakub.g)仅使用#将使用户在按下时跳回到顶部如果未启用JavaScript,则不会破坏页面(除非您有JavaScript检测代码如果启用了JavaScript,则可以禁用默认事件除非你知道如何阻止浏览器选择某些文本,否则你必须使用href(不知道使用4是否会消除阻止浏览器选择文本的因素)

基本上没有人在这篇文章中提到5,我认为这很重要,因为如果你的网站突然开始围绕链接进行选择,它会显得不专业。