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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
JS 对象介绍
Jan 20 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
详解微信UnionID作用
May 15 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
下拉菜单点击实现连接跳转功能的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
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
javascript onmouseout 解决办法
2010/07/17 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
python实现的防DDoS脚本
2011/02/08 Python
python中元类用法实例
2014/10/10 Python
python显示生日是星期几的方法
2015/05/27 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python实现微信防撤回神器
2019/04/29 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Pytorch释放显存占用方式
2020/01/13 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
Python中的整除和取模实例
2020/06/03 Python
python怎么判断素数
2020/07/01 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
Linux常见面试题
2016/10/04 面试题
超级搞笑检讨书
2014/01/15 职场文书
民间借贷借条如何写
2015/05/26 职场文书