我想在没有任何重定向的情况下运行一个简单的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事件)?
当前回答
我用了下面这行代码:
<a id="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>
其他回答
除此之外,href会显示在浏览器的状态栏上,而onclick则不会。我认为在那里显示javascript代码对用户不友好。
投票最多的答案在今天已经过时了
我建议完全相反,循序渐进地看原因:
好:
<a id="myLink" href="javascript:MyFunction();">link text</a>
这取决于,可能是好的,因为爬虫跟踪href目标,如果有任何有意义的内容产生MyFunction()(动态链接),它比在click事件中更有可能被跟踪,后者可能有多个或没有侦听器。
bad:
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
#意味着没有意义的链接,爬虫通常只对前x个链接感兴趣,所以它可以阻止它们在页面后面跟踪一些有意义的链接。
更糟糕的是:
<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>
与前面加return false一样,可以防止跟随链接。如果一些其他脚本想要添加另一个侦听器并更新目标(比如通过代理重定向),他们不能不修改onclick(好吧,这只是一个小挫折,因为这样的用例相当理论化)。
坏的:
使用jQuery或其他类似的框架附加onclick处理程序的元素的ID。
$('#myLink').click(function(){ MyFunction(); return false; });
jQuery在2020+已经过时,不应该在新项目中使用。
href中的事件
href属性处理程序没有得到事件对象,因此处理程序不会隐式地看到哪个链接是源。你可以在onclick处理程序中添加它,它会在href之后触发:
<a href="javascript:my_function(event2)" onclick="event2=event">
JS based link
</a>
<script>
function my_function(e) {
console.log(e.target); // the source of the click
if(something) location.href = ...; // dynamic link
}
</script>
上面的答案是一个非常糟糕的做法,永远不要链接到空哈希,因为它可能会在后面产生问题。
最好的方法是将事件处理程序绑定到元素上,就像许多人所说的那样,但是<a href="javascript:doStuff();“>do stuff</a>在每个现代浏览器中都能完美地工作,我在渲染模板时广泛使用它,以避免为每个实例重新绑定。在某些情况下,这种方法提供了更好的性能。YMMV
另一个有趣的消息是....
Onclick和href在直接调用javascript时有不同的行为。
onclick将正确地传递这个上下文,而href不会,换句话说,<a href="javascript:doStuff(这个)">没有上下文</ >将不工作,而<a onclick="javascript:doStuff(此)">no context</a>将。
是的,我省略了href。虽然这并不符合规范,但它可以在所有浏览器中工作,尽管理想情况下,它应该包括一个href="javascript:void(0);"作为良好的衡量标准
我经历过javascript: hrefs不能工作时,页面嵌入到Outlook的网页功能,其中一个邮件文件夹被设置为显示url
这是
<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>