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 控制弹出窗口
Apr 10 Javascript
javascript indexOf函数使用说明
Jul 03 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
js加强的经典分页实例
Mar 15 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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强大的时间转换函数strtotime
2016/02/18 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python中的逆序遍历实例
2019/12/25 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
2014年体育部工作总结
2014/11/13 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
检讨书范文
2019/04/16 职场文书