我想在没有任何重定向的情况下运行一个简单的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代码对用户不友好。
在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运行正常。
在任何不是专门用于脚本的属性中使用javascript:都是一种过时的HTML方法。虽然从技术上讲它是可行的,但您仍然将javascript属性分配给非脚本属性,这不是一个好的实践。它甚至可以在旧的浏览器上失败,甚至在一些现代的浏览器上(一个谷歌论坛的帖子似乎表明Opera不喜欢'javascript:' url)。
更好的做法是第二种方式,将javascript放到onclick属性中,如果没有可用的脚本功能,则忽略该属性。在href字段中放置一个有效的URL(通常是'#'),以供那些没有javascript的人使用。
就javascript而言,一个区别是onclick处理程序中的this关键字将引用其onclick属性的DOM元素(在本例中为<a>元素),而href属性中的this将引用窗口对象。
在表示方面,如果链接中缺少href属性(例如<a onclick="[…]">),那么默认情况下,浏览器将显示文本游标(而不是通常需要的指针游标),因为它将<a>视为锚,而不是链接。
在行为方面,当通过href导航指定操作时,浏览器通常支持使用快捷方式或上下文菜单在单独的窗口中打开该href。当只通过onclick指定操作时,这是不可能的。
但是,如果您想知道从DOM对象的单击中获得动态操作的最佳方法是什么,那么使用javascript将事件与文档内容分开是最佳方法。你可以通过多种方式做到这一点。一个常见的方法是使用javascript库,如jQuery来绑定一个事件:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
$('a#link').click(function(){ /* ... action ... */ })
</script>
最好的方法是:
<a href="#" onclick="someFunction(e)"></a>
问题是这将在浏览器中添加一个散列(#)到页面URL的末尾,从而要求用户单击返回按钮两次才能进入您的页面之前的页面。考虑到这一点,您需要添加一些代码来停止事件传播。大多数javascript工具包已经有了这个函数。例如,dojo工具包使用
dojo.stopEvent(event);
这样做