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 相关文章推荐
javascript 正则表达式相关应介绍
Nov 27 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
js实现无缝循环滚动
Jun 23 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
完美兼容各大浏览器的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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
分享php邮件管理器源码
2016/01/06 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python多项式回归的实现方法
2019/03/11 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
python 录制系统声音的示例
2020/12/21 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
模范教师事迹材料
2014/02/10 职场文书
幼儿园标语大全
2014/06/19 职场文书
学生检讨书范文
2014/10/30 职场文书
公司地址变更通知
2015/04/25 职场文书
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js