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的开源工具PACKER2.0.2
Nov 04 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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 实例化类的一点摘记
2008/03/23 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python list语法学习(带例子)
2013/11/01 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
python3实现mysql导出excel的方法
2019/07/31 Python
pyspark 随机森林的实现
2020/04/24 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
介绍一下write命令
2014/08/10 面试题
会计应聘求职信范文
2013/12/17 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python