在绝对元素上拖动时，拖动离开事件已连续触发

Question

在我们的应用程序中，我们将绝对位置元素用作相对位置元素的子元素。我们已将javascript拖放事件用于自定义功能。

问题：

将文件拖到波动的绝对元素上。

示例： https://stackblitz.com/edit/typescript-avv5u1?file=index.ts

复制步骤：

1。拖入所有文件以放置目标。

2。当您将鼠标悬停在目标上时，绝对元素将显示为黄色背景。

3。将拖动的文件悬停在黄色区域上。现在，黄色，区域将波动。

您能否建议我该如何解决我们这一方面的问题？

Answer 1

考虑对事件处理程序进行反跳和限制。 添加基本​​的实现。

  let droptarget = document.getElementById('droptarget');
    droptarget.addEventListener('dragover', function(e: any) {
        droptarget.classList.add('drag-hover');
        e.preventDefault();
        e.stopPropagation();
    })

    var eventThrottled = false;

    function dragHandler() {
      if(eventThrottled) {
          return;
        }
      droptarget.classList.remove('drag-hover');
      eventThrottled = true;
      setTimeout(()=>{eventThrottled = false;},2000);
    }

    droptarget.addEventListener('dragleave', dragHandler);

这会将处理程序禁用2000ms。

Answer 2

CSS解决方案

为放置目标父对象的所有子对象禁用指针事件。

#droptarget * {
  pointer-events: none;
}

CodeSandbox