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 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
js+cavans实现图片滑块验证
Sep 29 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
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP代码加密的方法总结
2020/03/13 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
js密码强度检测
2016/01/07 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
实例浅析js的this
2016/12/11 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
Java程序员面试题
2013/07/15 面试题
护理实习自我鉴定
2013/12/14 职场文书
入党综合考察材料
2014/06/02 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
学生会干部任命书
2015/09/21 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS