拖动绝对元素时，拖动事件已连续触发

Question

我们在我们的应用程序中使用position绝对元素作为位置相对元素的子元素。我们已经为我们的自定义函数使用了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