zoukankan      html  css  js  c++  java
  • javascript中区分鼠标单击和拖动事件

    在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这样的是基于时间的做法,使用坐标是基于空间的做法。

  • 相关阅读:
    Linux编程之epoll
    Linux IO模式及 select、poll、epoll详解
    与程序员相关的CPU缓存知识
    JDK源码阅读-FileOutputStream
    JDK源码阅读-FileInputStream
    JDK源码阅读-ByteBuffer
    Java如何保证文件落盘?
    Linux/UNIX编程如何保证文件落盘
    JDK源码阅读-RandomAccessFile
    JDK源码阅读-FileDescriptor
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6775913.html
Copyright © 2011-2022 走看看