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 相关文章推荐
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
JS如何定义用字符串拼接的变量
Jul 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
聊天室php&amp;mysql(二)
2006/10/09 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
Python通过字典映射函数实现switch
2020/11/06 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
主持人演讲稿范文
2013/12/28 职场文书
体育课课后反思
2014/04/24 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
介绍信格式样本
2015/05/05 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python