通过时间差来解决鼠标 mousedown/mouseup和click事件的冲突

今日有一需求：

鼠标按下可以拖动方块移动，松开鼠标方块留在原地，双击鼠标可以改变鼠标样式

首先：鼠标双击（click）事件是通过鼠标按下（mousedown）和鼠标抬起（mouseup）两个动作共同完成的，当我们为一个对象同时绑定这三个事件时，无论绑定的顺序如何，他的执行顺序都是先down然后up 最后click

        div.onmousedown = function(){
            console.log('鼠标按下了！');
        }
        div.onclick = function(){
             console.log('鼠标双击了！');
        }
        div.onmouseup = function(){
            console.log('鼠标抬起了！');
        }

所以就会出现一个问题: 鼠标按下抬起之后会自动触发双击事件
为了实现上述需求·所以我们要解决这个冲突，这里采用了时间差的方式：

var div = document.getElementsByTagName('div')[0];

        var firstTime = 0;
        var lastTime = 0;
	//定义一个开始时间和结束时间
        var key = false ;
	//定义一个锁
        div.addEventListener('mousedown',function(e){
            firstTime = new Date().getTime();
    // 鼠标按下的时候获取开始时间    

            document.onmousemove = function(e){

                var event = e || e.event;
                div.style.left = e.pageX  + 'px';
                div.style.top = e.pageY  + 'px';
            }
            document.onmouseup = function(){
                lastTime = new Date().getTime();
     // 鼠标抬起的时候获取结束时间
                if( lastTime - firstTime < 300){
                //如果这个时间差小于300  ，就把锁打开
                    key = true;
                }
                document.onmousemove = null;
            }

        })
        div.addEventListener('click',function(){

            if(key){
    // 如果锁是开启的状态 就执行双击事件的效果
                div.style.backgroundColor = 'green';
            }

        })