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 27 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
Views rows style模板重写代码
2011/05/16 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
完美解决AJAX跨域问题
2013/11/01 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python中的日期时间处理详解
2016/11/17 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
python sqlite的Row对象操作示例
2019/09/11 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
斯福泰克软件测试面试题
2015/02/16 面试题
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
法院信息化建设方案
2014/05/21 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
2019年大学推荐信
2019/06/24 职场文书
2019年教师入党申请书
2019/06/27 职场文书