问题：今天做了个文件拖拽上传的页面，文件拖入的时候拖拽区域变色，离开时拖拽区颜色变回原色，本来用dragleave来做，但是拖拽过程中进入子元素会触发dragleave导致拖拽区颜色闪动。

解决方法：在拖拽进入时，dragover会一直触发，进入子元素和出来子元素也会一直触发，没有区别，于是这里用dragover+防抖实现了dragleave的功能，但是这里有加了微量的延时，可以酌情处理。

以下是实现代码：

看之前得先了解文件拖拽，不懂的可以移步这位老哥的教程，非常详细，非常感谢：Vue实现带进度条的文件拖动上传_切糕的技术博客-CSDN博客_vue上传文件进度条

  mounted() {
    var tranlatePath = document.getElementById("tranlate-path");
    tranlatePath.addEventListener("dragenter", this.onDrag, false);
    tranlatePath.addEventListener("dragover", this.onDrag, false);
    tranlatePath.addEventListener("drop", this.onDrop, false);
  },
  methods: {
    uploadFile: function (file) {
      console.log(file);
    },
    onDrag: function (e) {
      this.ifDrop = true;

      // 防抖（在拖拽区域时由于dragover会不停触发，导致防抖启动，不会执行，只有在拖拽离开后dragover停止100ms后执行代码块）
      if (this.timeout !== null) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.ifDrop = false;
        this.timeout = null;
        console.log(this.ifDrop);
      }, 100);
      
      e.stopPropagation();
      e.preventDefault();
    },
    onDrop: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var dt = e.dataTransfer;
      for (var i = 0; i !== dt.files.length; i++) {
        this.uploadFile(dt.files[i]);
      }
    },
  },