Javascript HTML5基于拖放事件的覆盖层疯狂地闪烁

我正在尝试实现一个拖放上传程序，当文件被拖到窗口中时，它会用覆盖（dropzone内的100%宽度/高度绝对元素，静态时看起来很棒）标记dropzone，当文件离开窗口或被拖到dropzone外时，它会删除该标记

问题是，当文件被拖入窗口时，dragover和dragleave事件会疯狂地触发，因此覆盖层会疯狂地进出

window.addEventListener('dragover', handleDrag, false);
window.addEventListener('dragleave', handleStop, false);
window.addEventListener('drop', handleStop, false);
dropzone.addEventListener('drop', handleUpload, false);

function handleDrag(event) {
  // Stop normal browser response.
  event.stopPropagation();
  event.preventDefault();

  if (!window.mysettings.dragging) {
    window.mysettings.dragging = true;
    $('#dropzone').prepend('<div class="overlay">HELLO</div>');
  }
}

function handleStop(event) {
  // Stop normal browser response.
  event.stopPropagation();
  event.preventDefault();

  if (window.mysettings.dragging) {
    window.mysettings.dragging = false;
    $('#dropzone .overlay').remove();
  }
}

function handleUpload(event) {
  // Stop normal browser response.
  event.stopPropagation();
  event.preventDefault();

  if (window.mysettings.dragging) {
    window.mysettings.dragging = false;
    $('#dropzone .overlay').remove();
  }

  // DO MY FILE UPLOAD STUFF HERE
}

window.addEventListener（'dragover'，handleDrag，false）；
window.addEventListener（'dragleave'，handleStop，false）；
window.addEventListener（'drop'，handleStop，false）；
dropzone.addEventListener（'drop'，handleUpload，false）；
功能手柄（事件）{
//停止正常的浏览器响应。
event.stopPropagation（）；
event.preventDefault（）；
如果（！window.mysettings.drawing）{
window.mysettings.dragging=true；
$（“#dropzone”）.prepend（'HELLO'）；
}
}
功能手柄（事件）{
//停止正常的浏览器响应。
event.stopPropagation（）；
event.preventDefault（）；
if（window.mysettings.drawing）{
window.mysettings.dragging=false；
$（'#dropzone.overlay'）.remove（）；
}
}
函数handleUpload（事件）{
//停止正常的浏览器响应。
event.stopPropagation（）；
event.preventDefault（）；
if（window.mysettings.drawing）{
window.mysettings.dragging=false；
$（'#dropzone.overlay'）.remove（）；
}
//我的文件上传到这里吗
}

哎,

实际上发生了什么：

每秒大约有60次左右的时间准备/删除项目

不能在活动元素上显示全宽覆盖！如果您这样做，当覆盖处于活动状态时，在移动鼠标时将触发dragleave

这是我从dropbox网站上得到的-他们有四个部分来显示dropzone的激活-就像这些（上、下、左、右边框）：

祝你好运

---

另外，您可以随时向body添加类，而不是创建新节点，并通过css更改dropzone的视图

在我的项目中，我发现了以下属性：

• 可见性：隐藏

  到

  可见性：可见

• display:none

  到

  display:block

但以下属性没有闪烁：

• 不透明度：0

  到

  不透明度：1

---

另外，在HTML中，确保覆盖元素出现在活动区域元素之前。

您不希望使用

dragenter

而不是

dragover

？也许吧。我切换到dragenter，同样的问题也发生了，尽管“闪烁”的次数较少。基本问题是

dragLeave

在元素可见时被触发。我也有这个问题，并尝试添加样式，而不是添加和删除覆盖元素，但没有运气。您可以创建一个与您的代码？

http://jsbin.com/zabeqigefi/1/edit?css,js,output

<div style="opacity: 0.6; /* display: none; */" class="external-drop-indicator top"></div>
<div style="opacity: 0.6; display: none;" class="external-drop-indicator right"></div>
<div style="opacity: 0.6; display: none;" class="external-drop-indicator bottom"></div>
<div style="opacity: 0.6; display: none;" class="external-drop-indicator left"></div>