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

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

or

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


当前回答

为什么不使用这个?这不会向上滚动页面。

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>

其他回答

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

第二种显然更容易沟通。

4.0之前的引导模式有一个基本上未记录的行为,即它们将使用AJAX从元素加载href,除非它们正好是#。如果您使用的是Bootstrap 3,javascript:void(0);hrefs将导致javascript错误:

AJAX错误:错误GET javascript:void(0);

在这些情况下,您需要升级到引导程序4或更改href。

理想情况下,您应该这样做:

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

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

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

这里实际上有四种选择。

使用return false;允许您保留锚版本,以防在禁用JavaScript的浏览器中出现安全的“回退”,或者用户代理不支持(现在用户的1-5%)。如果脚本失败,可以使用锚定符“#”、空字符串或href的特殊URL。请注意,您必须使用href,以便屏幕读者知道它是一个超链接。(注意:我不会讨论删除href属性的问题,因为这一点在这里没有意义。锚上没有href意味着锚不再是一个超链接,而只是一个html标记,上面有一个被捕获的点击事件。)

<a href="" onclick="alert('hello world!');return false;">My Link</a>
<a href="#" onclick="alert('hello world!');return false;">My Link</a>
<a href="MyFallbackURL.html" onclick="alert('hello world!');return false;">My Link</a>

下面是目前在href属性中使用javascript:void(0)的更流行的设计。如果浏览器不支持脚本,则应再次将其发布回页面,因为href超链接路径返回了一个空字符串。如果您不关心谁支持JavaScript,请使用此选项。

<a href="javascript:void(0);" onclick="alert('hello world!');">My Link</a>