javascriptでは、マウスクリックとドラッグを区別します.

javascriptでは、一般的なDOM元素はdivのように、onmousedown、onmousemove、onmouseupの3つのマウスイベントがあります.

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

 
マウスがdiv 1上を移動したり、左ボタンを押したりしてドラッグすると、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を用いて,これは時間ベースの手法であり,座標を用いることは空間ベースの手法である.