除非处理dragover,否则HTML5 drop事件不起作用

Question

我正在听这个drop事件并且正在e.preventDefault()尝试打开已删除的文件.它一直工作到昨天.但就在今天它因某些未知原因而破产.我做了一个JsFiddle#bwquR/10反映相同的.

编辑:

看起来如果你不采取dragover事件drop无法处理.即使在小提琴中如果你评论dragover它也行不通.
在实际工作中我错过了拼写dragover但是它仍然是一个问题,drop如果没有dragover

小提琴实际上是工作但是身体很小(只有DROP那里的文字).它drop只是在DROP文字不在整个身体上的那个小区域上进行.所以我觉得它不起作用.对困惑感到抱歉.

Answer 1

我想这是因为没有dragOver事件处理程序,使用了dragOver事件的默认事件处理程序,因此,之后不会触发drop事件.e.preventDefault在drop事件之前需要执行dragOver事件.

Answer 2

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

如果要允许删除，则必须通过取消事件来阻止默认处理。您可以通过从属性定义的事件侦听器返回 false 或调用事件的 event.preventDefault 方法来执行此操作。在单独脚本中定义的函数中，后者可能更可行。

<div ondragover="return false">
<div ondragover="event.preventDefault()">

在 dragenter 和 dragover 事件期间调用 preventDefault 方法将指示在该位置允许放置。但是，您通常希望仅在某些情况下调用 preventDefault 方法，例如，仅当链接被拖动时。为此，请调用检查条件并仅在满足条件时取消事件的函数。如果不满足条件，则不要取消该事件，如果用户释放鼠标按钮，则不会发生放置。

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);

Answer 3

对我来说效果很好。您是否将其作为 HTTP 或 FILE URL 加载？我相信它需要是 Chrome 的 HTTP URL。