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 相关文章推荐
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 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
计数器详细设计
2006/10/09 PHP
php实现网站插件机制的方法
2009/11/10 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
取得父标签
2006/11/14 Javascript
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
JavaScript实现京东快递单号查询
2020/11/30 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python opencv实现简易画图板
2020/08/27 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
自我鉴定的范文
2013/10/03 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
电力培训学习心得体会
2016/01/11 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书