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 相关文章推荐
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
Vue 数据响应式相关总结
Jan 28 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+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
Python面向对象编程基础解析(二)
2017/10/26 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
大学应届生求职简历的自我评价
2013/10/08 职场文书
四年级数学教学反思
2014/02/02 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
长江三峡导游词
2015/01/31 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python