javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element


Posted in Javascript onJanuary 05, 2010

因为在JavaScript中,mousedown、mouseup、click执行顺序是从左到右的,更重要的是一旦mousedown事件激活,正常情况(不在mousedown事件中绑定的方法使用alert类似方法,因为弹出对象框就阻止了事件传递,即后续调用事件丢失)下后面两个事件也肯定会被激活。平时我们在一个标签上只绑定一个click事件,其实触发click事件也都调用了mousedown、mouseup等事件,只是它们调用周期极短,而且我们又没有编写相关函数与这两个事件绑定,所以不会觉察到。现在假设你要在一个标签上同时注册这几个事件,并具绑定指定的处理函数,在实际开发中,你将会遇到我下面提及的问题。
先通过一个简单例子测试并发现我说的问题,让你有个直观的印象,再接着看我的解决办法。

<div id="div1" onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" onclick="clickFun();" style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px"></div> 
<input style="margin-top:10px" type="button" onclick="document.getElementById('div1').innerHTML='';" value="清除信息" /> 
<script type="text/javascript"> 
function mouseDownFun() 
{ 
document.getElementById('div1').innerHTML += 'mouseDown<br/>'; 
} 
function mouseUpFun() 
{ 
document.getElementById('div1').innerHTML += 'mouseUp<br/>'; 
} 
function clickFun() 
{ 
document.getElementById('div1').innerHTML += 'click<br/>'; 
} 
</script>

现在假设有这样一个需求:在一张图片上按下mousedown开始拖动这张图片,而在这张图片上发生mouseup鼠标释放就显示这张图片的相关信息。正常情况下要想mouseup绑定的函数执行,那么mousedown绑定的函数也执行了,而且还是先执行的,也就是说在你查看图片信息的时候,图片也在拖动中。其实你正真希望的可能是每次执行其中一个方法就好了,比如当你按下鼠标并很快就释放掉时,其实你是想看图片信息,而不是想拖动图片;相反,如果你按下鼠标并停顿了一下,表明你是想准备拖动图片,这时候查看信息方法不要执行。这怎么做到的呢,根据上面的分析,我发现可以用setTimeout函数来加以处理实现这样的需求(当然,如果你有发现更好的解决办法,一定要记得与我分享,哈)。下面给出完整例子,很简单,也加了注释,不另外解释了:
<div id="div1" onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px"></div> 
<input style="margin-top:10px" type="button" onclick="document.getElementById('div1').innerHTML='';" value="清除信息" /> 
<script type="text/javascript"> 
var doMouseDownTimmer = null; 
var isMouseDownDoing = false; 
function mouseDownFun() 
{ 
//因为mouseDownFun每次都会调用的,在这里重新初始化这个变量 
isMouseDownDoing = false; 
//延迟200毫秒才调用onmousedown真正的处理代码,如果在200毫秒内就释放鼠标,把 doMouseDownTimmer清除,那么onmousedown即使调用了,其实是没有调用到doMouseDown函数作为 onmousedown真正要处理的代码 
doMouseDownTimmer = setTimeout(doMouseDown,200); 
} 
function doMouseDown() 
{ 
//如果200毫秒后调用了这个方法,把isMouseDownDoing设置成true,表明发生了mouseDown实际处理,此后mouseUp就不要处理了 
isMouseDownDoing = true; 
document.getElementById('div1').innerHTML += 'mouseDown<br/>'; 
} 
function mouseUpFun() 
{ 
if (!isMouseDownDoing) 
{ 
clearTimeout(doMouseDownTimmer); //能进到这里来,不管三七二十一先把doMouseDownTimmer清除,不然200毫秒后doMouseDown方法还是会被调用的 
document.getElementById('div1').innerHTML += 'mouseUp<br/>'; 
} 
} 
</script>

相关话题:因为平时经常用的click事件都跑在mousedown、mouseup之后,我们可以用mouseup代替click(上面的例子就是这样用的),此时Element上就不要再注册click事件。当然,可以的话,还可以直接拿mousedown代替click,事件响应将更快,其中在Google的一些产品中有看到这样的写法,比如Gmail。
Javascript 相关文章推荐
js类 from qq
Nov 13 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
JS class语法糖的深入剖析
Jul 07 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 #Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 #Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 #Javascript
javascript 模拟点击广告
Jan 02 #Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 #Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 #Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 #Javascript
You might like
php设计模式之命令模式的应用详解
2013/05/21 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python中django学习心得
2017/12/06 Python
python 遍历pd.Series的index和value
2019/11/26 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
python如何实时获取tcpdump输出
2020/09/16 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
Delphi CS笔试题
2014/01/04 面试题
机电一体化毕业生求职信
2013/11/02 职场文书
《忆江南》教学反思
2014/04/07 职场文书
水电站项目建议书
2014/05/12 职场文书
员工安全生产承诺书
2014/05/22 职场文书
青奥会口号
2014/06/12 职场文书
机电专业求职信
2014/06/14 职场文书
公共场所禁烟标语
2014/06/25 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Django路由层如何获取正确的url
2021/07/15 Python