我希望在点击事件时运行一个简单的JavaScript函数,而不进行任何重定向。
将JavaScript调用放在 href
属性中(像这样)与使用 onclick
有什么区别或好处吗?
<a href="javascript:my_function();window.print();">....</a>
将其放入onclick
属性(绑定到onclick
事件) vs. 不将其放入onclick
属性?
我希望在点击事件时运行一个简单的JavaScript函数,而不进行任何重定向。
将JavaScript调用放在 href
属性中(像这样)与使用 onclick
有什么区别或好处吗?
<a href="javascript:my_function();window.print();">....</a>
将其放入onclick
属性(绑定到onclick
事件) vs. 不将其放入onclick
属性?
首先,将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;
}
我建议正好相反,按步骤说明原因如下:
好处:
<a id="myLink" href="javascript:MyFunction();">link text</a>
这要看情况,可能是好的,因为网络爬虫会跟随 href 的目标,如果 MyFunction()
生成了有意义的内容(动态链接),则它更可能被追踪,而点击事件可能有多个或没有监听器。
不好的:
<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 或其他类似框架通过元素 ID 添加 onclick 处理程序。
$('#myLink').click(function(){ MyFunction(); return false; });
在2020年及以后,jQuery已经过时,不应在新项目中使用。
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>
个人而言,我觉得在HREF标签中放置javascript调用很烦人。通常我并不会特别注意某个链接是否是javascript链接,而且经常想要在新窗口中打开一些内容。但是当我尝试使用这种类型的链接时,我会得到一个空白页面,什么都没有,但我的地址栏中却有javascript代码。然而,通过使用onclick事件可以避免这个问题。
在使用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次点击,并且只有1个函数执行。
Firefox正常工作。
<hr>
<h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
<button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
<div class="pull-right">
<button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
});
</script>
<a href="#" onclick="try{FUNCTION_YOU_WANT()}catch(e){}return false">click here</a>
我曾遇到过这样的问题:当页面嵌入 Outlook 的网页启用功能(即将邮件文件夹设置为显示 URL)时,javascript:hrefs 无法正常工作。
我无法相信+13年后,所有这些答案在语义上都是不正确的!一个锚元素<a>
:
...通过其href属性,创建到网页、文件、电子邮件地址、同一页面中的位置或任何其他URL可以访问的内容。
每个锚点内的内容应指示链接的目标。如果存在href属性,则在聚焦于该元素时按Enter键将激活它。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
因此,使用href=
来执行 JavaScript 是不良实践和糟糕的 Web 语义。相反,您应该在 button
元素上使用 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。
最重要的是:仅仅因为您可以这样做,并不意味着您应该这样做。
<span onclick="my_function();window.print();" style="text-decoration:underline;cursor:pointer;">text</span>
这也可以正常工作
<a (click)='myFunc()'>Click Here </a>
在一个使用Bootstrap的Angular项目中,(onclick)对我没有起作用。