bug的原因:
1 一个完整的点击事件包含两个事件:
mousedown(鼠标按下) , mouseup(鼠标抬起)
2一个完整的拖拽事件包含三个事件:
mousedown(鼠标按下) , mousemove(鼠标移动) , mouseup(鼠标按下)
3 所以在拖拽了一个元素后,该元素同事绑定了点击事件是会同事触发的
解决思路
我们通过对比发现拖拽跟点击事件不同的是拖拽事件多了一个mousemove事件,所以我们可以从这个mousemove入手,点击事件时mousedown与mouseup触发时鼠标没有移动
解决办法
我们可以通过mousedown时记录下鼠标的位置x,y,mouseup时记录下鼠标的位置l,t,最后判断两次事件的x、y的偏差值知道是否拖动,偏差值小与某个值的时候视为点击
var x = 0; // 鼠标按下时x的位置
var y = 0; // 鼠标按下时y的位置
var l = 0; // 鼠标松手时x的位置
var t = 0; // 鼠标松手时y的位置
//鼠标按下事件
dv.onmousedown = function(e) {
//获取x坐标和y坐标
x = e.clientX;
y = e.clientY;
//获取左部和顶部的偏移量
l = dv.offsetLeft;
t = dv.offsetTop;
//开关打开
isDown = true;
//设置样式
dv.style.cursor = 'move';
}
//鼠标抬起事件
dv.onmouseup = function(e) {
l = e.clientX;
t = e.clientY;
//开关关闭
isDown = false;
dv.style.cursor = 'default';
}
// 判断是否拖动了,这里我设置了5px,
function isdrag(x1, y1, x2 , y2) {
console.log(Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
if(Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)) <= 5) {
return false;
}
return true;
}
// 最后在点击事件触发的时候判断一下就好啦
let click =function (){
if(!isdrag(x,y,l,t)){
console.log("点击事件");
}else {
console.log("拖拽事件");
}
}
document.getElementById("dv").addEventListener("click",click)
最后就可以让我们在拖拽的时候不去触发点击事件了