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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
javascript 写类方式之二
Jul 05 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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 文章采集正则代码
2009/12/28 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
PHP7修改的函数
2021/03/09 PHP
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python列表元素常见操作简单示例
2019/10/25 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
病房管理制度范本
2015/08/06 职场文书
安全生产奖惩制度
2015/08/06 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
详解Vue的sync修饰符
2021/05/15 Vue.js
Python实现排序方法常见的四种
2021/07/15 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers