我想在没有任何重定向的情况下运行一个简单的JavaScript函数。
把JavaScript调用放在href属性中(像这样)有什么区别或好处吗?
<a href="javascript:my_function();window.print();">....</a>
与把它放在onclick属性(绑定到onclick事件)?
我想在没有任何重定向的情况下运行一个简单的JavaScript函数。
把JavaScript调用放在href属性中(像这样)有什么区别或好处吗?
<a href="javascript:my_function();window.print();">....</a>
与把它放在onclick属性(绑定到onclick事件)?
当前回答
我不敢相信13年后,所有这些答案在语义上都是错误的!一个锚元素<a>:
...使用它的href属性,创建一个超链接到网页,文件,电子邮件地址,同一页面中的位置,或任何其他URL可以地址。 每个链接中的内容应该指明链接的目的地。如果存在href属性,在聚焦于元素时按enter键将激活它。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
因此,在javascript中使用href=是一种糟糕的做法和糟糕的web语义。你应该在按钮元素上使用onclick=事件处理程序属性,如下所示:
HTML元素是一个交互式元素,由用户通过鼠标、键盘、手指、语音命令或其他辅助技术激活。一旦激活,它就会执行可编程操作,例如提交表单或打开对话框。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
事件处理程序onclick=:
所有事件处理程序属性接受一个字符串。该字符串将用于合成一个JavaScript函数,如function name(/args/) {body},其中name是属性的名称,body是属性的值。
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes
因为你不是导航到一个URL或链接目的地,而是触发一个Javascript函数,这样做的正确方法是使用onclick。如果你需要一个按钮上的锚标记的样式,只需使用CSS。
底线是:你能做并不意味着你就应该做。
其他回答
最好的方法是:
<a href="#" onclick="someFunction(e)"></a>
问题是这将在浏览器中添加一个散列(#)到页面URL的末尾,从而要求用户单击返回按钮两次才能进入您的页面之前的页面。考虑到这一点,您需要添加一些代码来停止事件传播。大多数javascript工具包已经有了这个函数。例如,dojo工具包使用
dojo.stopEvent(event);
这样做
编辑警告:请参阅评论,在这个答案中使用“nohref”是不正确的。
我使用
Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>
虽然绕了很长一段路,但还是完成了任务。使用A风格来简化 然后就变成:
<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style>
<a nohref onClick="alert('Hello World')">HERE</a>
除此之外,href会显示在浏览器的状态栏上,而onclick则不会。我认为在那里显示javascript代码对用户不友好。
在javascript中使用“href”时,我还注意到一件事:
如果两次点击之间的时间差很短,“href”属性中的脚本将不会被执行。
例如,尝试运行下面的示例并双击每个链接(快!)。 第一个链接将只执行一次。 第二个链接将执行两次。
<script>
function myFunc() {
var s = 0;
for (var i=0; i<100000; i++) {
s+=i;
}
console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>
在Chrome(双击)和IE11(三次点击)中复制。 在Chrome中,如果你点击足够快,你可以点击10次,只有一个功能执行。
Firefox运行正常。
将onclick放在href中会冒犯那些坚信内容与行为/动作分离的人。争论的焦点是你的html内容应该只关注内容,而不是表现形式或行为。
现在的典型路径是使用javascript库(例如。Jquery),并使用该库创建一个事件处理程序。它看起来像这样:
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );