如何通過拖動事件從元素的所有子級中刪除指針事件？

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')內部帶有JS的body所有子級上設置此規則？

Answer 1

我終於弄明白了。

這是一個例子

我正在使用Vue.js，因此dragging和showDropZone只是data()變量。

HTML

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

JS

  // 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();
  });

Answer 2

將類添加到主體（可以使用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/