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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
详解 javascript对象创建模式
Oct 30 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
thinkphp整合微信支付代码分享
2016/11/24 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
javascript版2048小游戏
2015/03/18 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
总结Python编程中三条常用的技巧
2015/05/11 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python实现杨氏矩阵查找
2019/03/02 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
Python实现微信好友的数据分析
2019/12/16 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
python批量生成条形码的示例
2020/10/10 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
工作中个人的自我评价
2013/12/31 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
社区春季防火方案
2014/06/02 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
如何正确理解python装饰器
2021/06/15 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android