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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
谈谈JS中的!!
Dec 07 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
完美兼容各大浏览器的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自动生成月历代码
2006/10/09 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
微信跳一跳游戏python脚本
2020/04/01 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
python实现flappy bird小游戏
2018/12/24 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
大学生创业计划书的范文
2014/01/07 职场文书
世界地球日活动总结
2015/02/09 职场文书
慰问信范文
2015/02/14 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
小爸爸观后感
2015/06/15 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
Vue+Flask实现图片传输功能
2022/04/01 Vue.js