鼠标左、右键失灵

场景

在我的实际需求中要求一个可移动的canvas，因此我在在canvas外层加了个自己实现的可移动的弹窗父组件。要求右键移动弹窗，左键涂鸦，同时屏蔽右键菜单栏。

具体实现

父组件
当右键被按下时，执行拖拽操作

      // 实现移动端拖拽
      down(){
        if(event.button == "2"){//0左键，1中键，2右键
          var moveDiv = document.getElementById('lucky')
          this.flags = true;
          var touch;
          if(event.touches){
            touch = event.touches[0];
          }else {
            touch = event;
          }
          this.position.x = touch.clientX;
          this.position.y = touch.clientY;
          this.dx = moveDiv.offsetLeft;
          this.dy = moveDiv.offsetTop;
        }
      },

屏蔽右键菜单栏

    created(){
      window.oncontextmenu=function(e){
        e.preventDefault();
      }
    },

子组件
当按下左键时，实现涂鸦

    drawBegin(e) {
      if(e.button == 0){//0左键，1中键，2右键
        console.log("eclient",e.clientX, e.clientY)
        this.setStageInfo(canvas.getBoundingClientRect())
        window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
        this.cxt.strokeStyle = "#000"

        this.cxt.beginPath()
        this.cxt.moveTo(
          e.clientX - this.stage_info.left,
          e.clientY - this.stage_info.top,
        )
        let _this = this;
        this.path.beginX = e.clientX - this.stage_info.left
        this.path.beginY = e.clientY - this.stage_info.top
        document.onmousemove = () => {
          _this.drawing(event)
        }
      }
    }