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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
ASP Json Parser修正版
Dec 06 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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字符串的编码问题的详细介绍
2013/04/27 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
理解javascript中的原型和原型链
2015/07/30 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python smallseg分词用法实例分析
2015/05/28 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
行政总经理岗位职责
2013/12/05 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
代理协议书
2014/04/22 职场文书
幼师求职自荐信
2014/05/31 职场文书
新闻报道策划方案
2014/06/11 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
信访工作个人总结
2015/03/03 职场文书
培训督导岗位职责
2015/04/10 职场文书
2019财务转正述职报告
2019/06/27 职场文书