码迷,mamicode.com
首页 > 编程语言 > 详细

javascript中区分鼠标单击和拖动事件

时间:2014-11-11 12:47:27      阅读:318      评论:0      收藏:0      [点我收藏+]

标签:鼠标移动和拖拽

在javascript中,一般的DOM元素如div,都有onmousedown、onmousemove、onmouseup这3个鼠标事件。

<div id="div1" onmousedown="down();" onmouseup="up();" onmousemove="move();"></div>

 

当鼠标在div1上移动或者按下左键拖动的时候,都会触发onmousemove事件。如何区分这2种事件呢?如何区分鼠标单击弹起和拖动后弹起呢?区分鼠标单击弹起和拖动后弹起,可以注册onmousedownonmouseup事件处理函数,在onmousedown中记录鼠标按下的位置,在onmouseup中记录鼠标弹起的位置,然后比较这2个位置的差距。如果距离差距不大,则是鼠标单击后弹起;如果距离相差较大,则是鼠标拖动后弹起。下面介绍的是使用setTimeout来实现。

<div id="div1" onmousedown="down();" onmouseup="up();" onmousemove="move();" />

<script type="text/javascript">
    var timmerHandle = null;
    var isDrag = false;
    
    function down()
    {
    	console.log("mouse down.");
        //因为mouseDownFun每次都会调用的,在这里重新初始化这个变量
        isDrag = false;
    	
        //延迟100ms
        timmerHandle = setTimeout(setDragTrue,200);
    }
    
    function setDragTrue()
    {
    	isDrag = true;
    }
	
    function move()
    {
	//可以使用isDrag来判断是移动还是拖动
    }
    
    
    function up()
    {
    	
        if (!isDrag)
        {
    	    //先把doMouseDownTimmer清除,不然200毫秒后setGragTrue方法还是会被调用的
            clearTimeout(timmerHandle); 
            console.log("mouse up.");
        }
    	else
    	{
    	    isDrag = false;
    	    console.log("draging over.");
    	}
    } 
</script>

 

使用setTimeout这种是基于时间的做法,使用坐标是基于空间的做法。

javascript中区分鼠标单击和拖动事件

标签:鼠标移动和拖拽

原文地址:http://blog.csdn.net/aitangyong/article/details/41006877

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!