JavaScript - href vs onclick for callback function on Hyperlink

2022-08-29 23:03:09

我想在没有任何重定向的情况下在点击时运行一个简单的JavaScript函数。

将 JavaScript 调用放在属性中有什么区别或好处吗(如下所示):href

<a href="javascript:my_function();window.print();">....</a>

vs. 将其放在属性中(将其绑定到事件)?onclickonclick


答案 1

坏:

<a id="myLink" href="javascript:MyFunction();">link text</a>

好:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

更好:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

更好的1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

更好的2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

为什么更好?因为会阻止浏览器跟踪链接return false

最好:

使用jQuery或其他类似的框架按元素的ID附加onclick处理程序。

$('#myLink').click(function(){ MyFunction(); return false; });

答案 2

将 onclick 放在 href 中会冒犯那些坚信将内容与行为/行动分开的人。论点是,你的html内容应该只关注内容,而不是呈现或行为。

现在的典型路径是使用javascript库(例如jquery)并使用该库创建事件处理程序。它看起来像这样:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );