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 UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 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
B2K与车机的中波PK
2021/03/02 无线电
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
部署Python的框架下的web app的详细教程
2015/04/30 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
对python中Json与object转化的方法详解
2018/12/31 Python
python版DDOS攻击脚本
2019/06/12 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
职业教育毕业生求职信
2013/11/09 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
2016年感恩节寄语
2015/12/07 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Vue.Draggable实现交换位置
2022/04/07 Vue.js
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL