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 相关文章推荐
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 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
杏林同学录(三)
2006/10/09 PHP
php 动态多文件上传
2009/01/18 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
Python Pandas数据结构简单介绍
2019/07/03 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
详解python中*号的用法
2019/10/21 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
keras中的History对象用法
2020/06/19 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
优秀党支部申报材料
2014/12/24 职场文书
2015年统战工作总结
2015/05/19 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
Go语言并发编程 sync.Once
2021/10/16 Golang
Mysql开启外网访问
2022/05/15 MySQL