vue拖拽事件和单击事件冲突处理

//拖拽
let dv =  document.getElementsById('')
    drag(dv) {
      //获取元素
      let x = 0
      let y = 0
      let l = 0
      let t = 0
      let isDown = false
      let firstTime='',lastTime=''
      //鼠标按下事件
      dv.onmousedown = (e) => {
        //获取x坐标和y坐标
        x = e.clientX;
        y = e.clientY;
        //获取左部和顶部的偏移量
        l = dv.offsetLeft;
        t = dv.offsetTop;
        //开关打开
        isDown = true;
        //设置样式
        dv.style.cursor = "move";
        firstTime = new Date().getTime()
      };
      //鼠标移动
      window.onmousemove = (e)=> {
        if (isDown == false) {
          return;
        }
        //获取x和y
        let nx = e.clientX;
        let ny = e.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        let nl = nx - (x - l);
        let nt = ny - (y - t);

        nt <= 0 ? (nt = 0) : nt;

        let wheight = document.body.offsetHeight;
        let dheight = dv.offsetHeight;
        if (nt >= wheight - dheight) {
          nt = wheight - dheight;
        }
        // dv.style.left = nl + 'px';
        dv.style.top = nt + "px";
      };
      //鼠标抬起事件
      dv.onmouseup = () =>{
        //开关关闭
        isDown = false;
        dv.style.cursor = "default";
        lastTime = new Date().getTime()
        if( (lastTime - firstTime) < 200){
            // 处理单击事件
        }
      };
    }

你可能感兴趣的:(vue拖拽事件和单击事件冲突处理)