基于HTML5拖放事件的叠加层闪烁得像疯了似的

Question

我正在尝试实现一个拖放文件上传器，当文件被拖到窗口中时，该拖放器会用覆盖层标记放置区域（放置区域内宽度/高度的绝对元素为100％，在静态时看起来不错），并删除该标记当文件离开窗口或放置在放置区之外时。

问题是，当文件被拖到窗口中时，draftover和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
}

Answer 1

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

Answer 2

在我的项目中，我发现以下属性确实闪烁了：