标签:鼠标移动和拖拽
在javascript中,一般的DOM元素如div,都有onmousedown、onmousemove、onmouseup这3个鼠标事件。
<div id="div1" onmousedown="down();" onmouseup="up();" onmousemove="move();"></div>
当鼠标在div1上移动或者按下左键拖动的时候,都会触发onmousemove事件。如何区分这2种事件呢?如何区分鼠标单击弹起和拖动后弹起呢?区分鼠标单击弹起和拖动后弹起,可以注册onmousedown和onmouseup事件处理函数,在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这种是基于时间的做法,使用坐标是基于空间的做法。
标签:鼠标移动和拖拽
原文地址:http://blog.csdn.net/aitangyong/article/details/41006877