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

Question

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

问题 ：

将文件拖到绝对元素上时会发生波动。

范例： https ：//stackblitz.com/edit/typescript-avv5u1？file = index.ts

重现步骤：

1.拖入任何文件以放置目标。

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

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

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

Answer 1

CSS解决方案

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

#droptarget * {
  pointer-events: none;
}

代码沙盒

Answer 2

考虑对事件处理程序进行去抖动和限制。添加基本​​实现。

  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);

这会禁用处理程序 2000 毫秒。