a标签的href与onclick事件的区别详解


Posted in Javascript onNovember 12, 2014

onclick中javascript的区别一般没用到都没注意,但出错时才有些郁闷,看文本章解释如下:

以前一直很随意,后来看.net里的linkbutton似乎是用在<a href="javascript:fun();"...>的形式,今天用这种方式就遇到一些问题,摘网友的文章和我的结论放在下面:

1.链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接);
2.假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值。不信,你可以将 goGoogle 函数中的 return false 注释掉;
3.如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动;
4.如果在链接的 href 属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替;
5.在按住Shift键的情况下会有所区别。
6.今天我遇到的问题,在IE6.0里以href的形式访问不到parentNode。
7.尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。
就这些,花了不少时间在这上面。

[缘由]
用CheckBoxList控件时想实现在每个checkbox后再加链接的功能,点链接实现一些功能之外,还要把checkbox选中。

<input type="checkbox" name="chk" id="chk">
<label for="chk">选中它<a onclick="this.parentNode.click();" href="#" style="border:solid 1px blue;">[label中的链接]</a></label>

最后用parentNode来实现的。

<a href="javascript:void(0)" onclick="defineField(this);return false">ClickToDefine</a>

Javascript 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 #Javascript
JavaScript实现关键字高亮功能
Nov 12 #Javascript
javascript的函数作用域
Nov 12 #Javascript
浅析javascript的间隔调用和延时调用
Nov 12 #Javascript
jQuery的deferred对象详解
Nov 12 #Javascript
探寻Javascript执行效率问题
Nov 12 #Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 #Javascript
You might like
php修改指定文件后缀的方法
2014/09/11 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
php导入模块文件分享
2015/03/17 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
js null undefined 空区别说明
2010/06/13 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
收集的几个Python小技巧分享
2014/11/22 Python
安装dbus-python的简要教程
2015/05/05 Python
Python正则表达式完全指南
2017/05/25 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
利用Python计算KS的实例详解
2020/03/03 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
C#面试问题
2016/07/29 面试题
大学生专科学习生活的自我评价
2013/12/07 职场文书
矿泉水广告词
2014/03/20 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
行政上诉状范文
2015/05/23 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Python使用scapy模块发包收包
2021/05/07 Python