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 相关文章推荐
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 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
基于MySQL体系结构的分析
2013/05/02 PHP
PHP反射机制用法实例
2014/08/28 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python PIL模块的基本使用
2020/09/29 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
小学生成绩单评语
2014/12/31 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis