本博客文章标题如未标有转载、转等字匀属本人原创或演绎作品,是采用知识共享署名-非商业性使用-相同方式共享 2.5进行许可,承蒙转摘请保留署名及出处,谢谢! 影评|CSDN博客

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

因为在JavaScript中,mousedown、mouseup、click执行顺序是从左到右的,更重要的是一旦mousedown事件激活,正常情况下后面两个事件也肯定会被激活。平时我们在一个标签上只绑定一个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

posted @ 2010-01-05 09:07 问道者 阅读(...) 评论(...) 编辑 收藏