今日有一需求:
鼠标按下可以拖动方块移动,松开鼠标方块留在原地,双击鼠标可以改变鼠标样式
首先:鼠标双击(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';
}
})