以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?
函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>
or
函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>
以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?
函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>
or
函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>
当前回答
理想情况下,您应该有一个真正的URL作为非JavaScript用户的回退。
如果这没有意义,请使用#作为href属性。我不喜欢使用onclick属性,因为它将JavaScript直接嵌入到HTML中。更好的方法是使用外部JS文件,然后将事件处理程序添加到该链接。然后,您可以阻止默认事件,以便在用户单击该事件后,URL不会更改为追加#。
其他回答
根据您想要完成的任务,您可以忘记onclick,只需使用href:
<a href="javascript:myJsFunc()">Link Text</a>
它避免了返回false的需要。我不喜欢#选项,因为如上所述,它会将用户带到页面顶部。如果你有其他地方可以发送用户,如果他们没有启用JavaScript(这在我工作的地方很少见,但这是一个非常好的主意),那么Steve提出的方法非常有效。
<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>
最后,如果您不想任何人去任何地方,也不想调用javascript函数,那么可以使用javascript:void(0)。如果您有一个想要发生鼠标悬停事件的图像,但没有任何内容可供用户单击,那么它会非常有用。
我使用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)”
第二种显然更容易沟通。
如果您恰好使用AngularJS,可以使用以下选项:
<a href="">Do some fancy JavaScript</a>
这不会有任何作用。
此外
它不会像(#)那样将您带到页面顶部因此,您不需要使用JavaScript显式返回false它简短而简洁
“#”将使用户返回页面顶部,因此我通常使用void(0)。
javascript:;其行为类似于javascript:void(0);
我看到了很多想继续使用#values for href的人的答案,因此,这里有一个答案,希望能让两个阵营都满意:
A) 我很高兴将javascript:void(0)作为我的href值:
<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>
B) 我正在使用jQuery,并希望#作为我的href值:
<a href="#" onclick="someFunc.call(this)">Link Text</a>
<script type="text/javascript">
/* Stop page jumping when javascript links are clicked.
Only select links where the href value is a #. */
$('a[href="#"]').live("click", function(e) {
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
</script>
注意,如果您知道链接不会动态创建,请改用单击功能:
$('a[href=“#”]').click(函数(e){