在javascript中,一般的DOM元素如div,都有onmousedown、onmousemove、onmouseup这3个鼠标事件。
<div id="div1" οnmοusedοwn="down();" οnmοuseup="up();" οnmοusemοve="move();"></div>
当鼠标在div1上移动或者按下左键拖动的时候,都会触发onmousemove事件。怎样区分这2种事件呢?怎样区分鼠标单击弹起和拖动后弹起呢?区分鼠标单击弹起和拖动后弹起。能够注冊onmousedown和onmouseup事件处理函数,在onmousedown中记录鼠标按下的位置,在onmouseup中记录鼠标弹起的位置,然后比較这2个位置的差距。假设距离差距不大,则是鼠标单击后弹起;假设距离相差较大,则是鼠标拖动后弹起。
以下介绍的是使用setTimeout来实现。
<div id="div1" οnmοusedοwn="down();" οnmοuseup="up();" οnmοusemοve="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这样的是基于时间的做法,使用坐标是基于空间的做法。