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 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
没有document.getElementByName方法
Aug 19 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
微信小程序 导入图标实现过程详解
Oct 11 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设计模式中单例模式的应用分析
2013/05/15 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
php对称加密算法示例
2014/05/07 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
Dom操作之兼容技巧分享
2011/09/20 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
vue中v-model动态生成的实例详解
2017/10/27 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python如何查看网页代码
2020/06/07 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
就业表自我评价分享
2014/02/06 职场文书
销售代理协议书
2014/09/30 职场文书
四年级小学生评语
2014/12/26 职场文书
市场部岗位职责
2015/02/12 职场文书
教师节校长致辞
2015/07/31 职场文书