繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
- Javascript
- 用js实现终止浏览器对页面HTML的继续解析即停止解析 兼容firefox
- Auntion-TableSort国人写的一个javascript表格排序的东西
- javascript实现二分查找法实现代码
- 利用ASP发送和接收XML数据的处理方法与代码
- 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
- javascript之文本框输入四个数字自动加空格的脚本
- 比较简单实用的使用正则三种版本的js去空格处理方法
- 比较简洁的JavaScript 实时显示时间的脚本 修正版
- JavaScript检查表单是否为空的函数
- window.open被浏览器拦截后的自定义提示效果代码
- javascript跟随鼠标的文字带滚动效果
- 让插入到 innerHTML 中的 script 跑起来的代码
- Flash+XML滚动新闻代码 无图片 附源码下载
- javascript(js) join函数使用方法介绍
- 表格头固定而列可滚动的效果
- document.designMode的功能与使用方法介绍
- 精解window.setTimeout()&window.setInterval()使用方式与参数传递问题！
- 用javascript实现的电信铁通（网通）自动跳转源代码
- 用js查找法实现当前栏目的高亮显示的代码
- javascript之鼠标拖动位置互换效果代码
Javascript 中的 javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 465 ::
收藏到网摘: n/a
先通过一个简单例子测试并发现我说的问题，让你有个直观的印象，再接着看我的解决办法。 因为在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。
评论 (0) All
