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 中令人困惑的变量赋值
Aug 13 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
ES6中异步对象Promise用法详解
Jul 31 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中array_merge和array相加的区别分析
2013/06/17 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
php实现用户登陆简单实例
2017/04/04 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
python切换hosts文件代码示例
2013/12/31 Python
Python中的Django基本命令实例详解
2018/07/15 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
党员个人思想汇报
2013/12/28 职场文书
学术会议通知
2015/04/15 职场文书
地心历险记观后感
2015/06/15 职场文书
公司财务管理制度
2015/08/04 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python