我想在没有任何重定向的情况下运行一个简单的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="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>
更好的是:
<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>
为什么好吗?因为返回false会阻止浏览器跟踪该链接
最好的:
使用jQuery或其他类似的框架附加onclick处理程序的元素的ID。
$('#myLink').click(function(){ MyFunction(); return false; });
其他回答
在任何不是专门用于脚本的属性中使用javascript:都是一种过时的HTML方法。虽然从技术上讲它是可行的,但您仍然将javascript属性分配给非脚本属性,这不是一个好的实践。它甚至可以在旧的浏览器上失败,甚至在一些现代的浏览器上(一个谷歌论坛的帖子似乎表明Opera不喜欢'javascript:' url)。
更好的做法是第二种方式,将javascript放到onclick属性中,如果没有可用的脚本功能,则忽略该属性。在href字段中放置一个有效的URL(通常是'#'),以供那些没有javascript的人使用。
我用了下面这行代码:
<a id="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>
首先,将url放在href中是最好的,因为它允许用户复制链接,在另一个选项卡中打开等等。
在某些情况下(例如HTML频繁变化的网站),每次更新都绑定链接是不实际的。
典型绑定方法
正常的链接:
<a href="https://www.google.com/">Google<a/>
JS的代码是这样的:
$("a").click(function (e) {
e.preventDefault();
var href = $(this).attr("href");
window.open(href);
return false;
});
这种方法的好处是清晰地分离标记和行为,并且不必在每个链接中重复函数调用。
不绑定方法
然而,如果你不想每次都绑定,你可以使用onclick并传入元素和事件,例如:
<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>
这是JS的:
function Handler(self, e) {
e.preventDefault();
var href = $(self).attr("href");
window.open(href);
return false;
}
这种方法的好处是你可以随时加载新链接(例如通过AJAX),而不必担心每次都要绑定。
我经历过javascript: hrefs不能工作时,页面嵌入到Outlook的网页功能,其中一个邮件文件夹被设置为显示url
在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运行正常。