js拖拽时不触发点击事件

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)

最后就可以让我们在拖拽的时候不去触发点击事件了