js函数中onmousedown和onclick的区别和联系探讨


Posted in Javascript onMay 19, 2013

这两个事件很常见。
了解这两个事件的区别,但是实际并没有使用到这两个事件的区别去做一些操作。
通常使用onclick的时候也可以使用onmousedown,使用onclick的时候更多一些。
今天碰到了非使用onmousedown不可的时候,故特此记录。

先说一下区别:onclick是在鼠标点击弹起之后触发的事件。onmousedown是在鼠标按下之后触发的事件。
简单的说onclick = onmousedown + onmouseup;
如果在某个地方按下鼠标后移开鼠标在另外一个地方松开鼠标会触发onmousedown事件,但是onclick事件却不会被触发。
我们今天要实现的功能是点击a标签,切换到另外一个页面,在原页面关闭之前需要触发一个函数。不是windowunload。
之前使用的是onclick事件,IE中测试无问题,但是在FF中测试发现,在页面被销毁之前还没有来得及执行这个函数。
如果使用onmousedown事件,虽然也没有办法保证该函数一定被执行,但是为该函数的执行争取了一定的时间,因为跳转是在鼠标弹起之后执行的。

解决办法一:onclick="return test()",当且仅当当该函数返回true之后才执行跳转。这样导致了一个新的问题。如果我们在test函数中执行了多线程程序或者新开线程的程序后,会先返回true,跳转,新开的线程就没有被执行。如下面的函数:

function test() 
{ 
(new Image()).src="1.html"; 
window.open("1.html","_new"); 
//alert("ok"); 
return true; 
}

我在1.html文件中设置了<body onload="javascript:alert('ok')">,当1.html并没有被完全渲染结束时,跳转已经执行了。new image函数也没有保证已经被执行了。
在使用单一线程执行函数时,可使用return test()这种方法。

解决办法二:估计一下test函数的多线程函数的最长执行速度,加入执行时间为100.不在a标签中使用跳转。在test函数中使用setTimeout(location.href="1.html",100)来执行跳转。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
Prototype框架详解
Nov 25 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
简单实现js放大镜效果
Jul 24 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 #Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 #Javascript
固定背景实现的背景滚动特效示例分享
May 19 #Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 #Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 #Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 #Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 #Javascript
You might like
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
jQuery技巧总结
2011/01/01 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
初步探究Python程序的执行原理
2015/04/11 Python
python ssh 执行shell命令的示例
2020/09/29 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
公司员工的自我评价范例
2013/11/01 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
教师演讲稿范文
2014/01/08 职场文书
2014新年寄语
2014/01/20 职场文书
经典演讲稿汇总
2014/05/19 职场文书
师范大学生求职信
2014/06/13 职场文书
食品工程专业求职信
2014/06/15 职场文书
分居协议书范本
2014/11/03 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
JS数组去重详情
2021/11/07 Javascript
Android Rxjava3 使用场景详解
2022/04/07 Java/Android