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

Question

我创建了一个全局 dragover 事件监听器，这样当它在页面上拖动某些东西时，它会在页面上显示一个 dragover 区域，并在您将光标移出页面时隐藏它:

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

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

问题

JSfiddle:http://jsfiddle.net/ct3haqf0

尝试将任何文件拖动到页面上的元素上(从左上角开始)，您会看到 dragover 事件快速来回切换到 dragleave，这使得放置当您在元素中拖动区域时，该区域会出现/消失。

在我的元素中，它造成了明显的滞后。问题是，dragover 事件与元素的所有子元素冲突(因此激活了 dragleave)，因此当您将某些东西拖过充满元素的页面

问题

我发现你应该设置:pointer-events: none 到元素的所有子元素和 dragover 监听器，所以我必须设置这个规则到 body * { }

那么，如何在 addEventListener('dragover') 中为 body 的所有子项设置此规则？

Answer 1

向正文添加一个可以用 CSS 设置样式的类怎么样？

添加类:

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

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

CSS:

body.drag * {
    pointer-events: none !important;
}

我在 jsfiddle 中测试了它:http://jsfiddle.net/timlg07/4fdj0hvc/