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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3375字，纯文字阅读大概需要5分钟。

内容图文

<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当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element全部内容，希望文章能够帮你解决javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端