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 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
js与applet相互调用的方法
Jun 22 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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
PHP合并静态文件详解
2014/11/14 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
layui表格数据重载
2019/07/27 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python生成IP段的方法
2015/07/07 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
行政专员岗位职责
2014/01/02 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
golang 实用库gotable的具体使用
2021/07/01 Golang
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
JavaScript实现栈结构详细过程
2021/12/06 Javascript