Javascript 如何使用dragover事件从元素的所有子元素中删除指针事件？

我创建了一个全局

dragover

事件侦听器，这样当它在页面上拖动某个内容时，它会在页面上显示一个dragover区域，当您将光标移离页面时将其隐藏：

 document.addEventListener('dragover', event => { 
   event.preventDefault()
   this.dragOverArea = true
   // ...
 })

 document.addEventListener('dragleave', event => { 
   event.preventDefault()
   this.dragOverArea = false
   // ...
 })

问题 JSfiddle：

尝试将任何文件拖动到页面上的元素上（从左上角），您将看到

dragover

事件快速切换到

dragleave

，这使得拖放区域在拖动元素时出现/消失

在我的项目中，它造成了明显的滞后。问题是，

dragover

事件与元素的所有子元素冲突（因此会激活

dragleave

），因此当您在充满元素的页面上拖动某个内容时，它会不断显示/隐藏拖放区域

问题: 我发现您应该使用

dragover

listener将：

指针事件：none

设置为元素的所有子元素，因此我必须将此规则设置为

body*{}

---

那么，如何将此规则设置为具有JS inside

addEventListener（'dragover'）

的

body

的所有子级？

向body添加一个可以使用CSS进行样式设置的类怎么样

添加类：

function addClassToBody( newClass )
{
    document.body.className += " "+newClass+" ";
}

function removeClassFromBody( oldClass )
{
    document.body.className = document.body.className.replace(" "+oldClass+" "," ");
}

CSS:

---

我在JSFIDLE中进行了测试：

我终于找到了答案

这里有一个例子 我使用的是Vue.js，所以

拖动

和

showDropZone

只是

数据（）中的变量

html

  <div 
      v-show="showDropZone === true"
      id="drop-zone"
      class="drop-zone"
   >
      Drop zone text
  </div>

这样当某物拖过页面时
什么是
某物
？这个问题对我来说很不清楚me@DarrenSweeney其实这并不重要，任何页面元素都有
draggable
，或者任何外部元素，比如files。谢谢你的回答，我不知道为什么它对我仍然不起作用。下面是一个示例：尝试将任何文件拖动到
灰色
区域（正文）上，您将看到拖放区域出现，但如果将其拖动到页面上的其他元素上（从左上角）然后
dragover
事件不断切换到
dragleave
，拖放区域不断快速出现/消失。您必须将正文和html大小设置为100%。每次你进入尸体时它都会叫dragleave（尸体的大小只有100*20px）
  <div 
      v-show="showDropZone === true"
      id="drop-zone"
      class="drop-zone"
   >
      Drop zone text
  </div>

  // In the component with the drop zone div:
  document.getElementById('drop-zone').addEventListener('drop', event => {
    event.preventDefault()
    this.showDropZone = false
    var files = event.dataTransfer.files
  })


  // In the entry component:
  window.addEventListener('dragenter', event => { 
      this.dragging++;
      this.showDropZone = true

      event.stopPropagation();
      event.preventDefault();
  });


  window.addEventListener('dragover', event => { 
      this.showDropZone = true

      event.stopPropagation();
      event.preventDefault();
  });


  window.addEventListener('dragleave', event => { 
      this.dragging--;
      if (this.dragging === 0) {
          this.showDropZone = false
      }

      event.stopPropagation();
      event.preventDefault();
  });