HTML 拖放和事件冒泡的潜在错误

Question

我注意到，当 div 中有一个 div 处理 dragenter/leave 事件时，拖动内部 div 会导致外部 div 触发 dragleave。但这只发生在外部 div 为position: fixed 时。否则，拖动子/内部 div 会正确地冒泡到其父级。

示例：https://jsfiddle.net/ffxsam/L2mvbo2t/

将文件拖到输出窗格上，您会看到放置区出现。如果您继续拖动“Uh oh”文本，则放置区会消失。注释掉position: fixed 行，然后再试一次，您会看到是否拖过“Uh oh”，拖放区仍然存在。

这是一个错误吗？实际上，我刚刚意识到在 Firefox 中，dragleave 在我移过内部 div 时被触发，而不管position。我该如何解决这个问题？

Answer 1

我通过三层解决了这个问题：

全角position: fixed背景div，包含两个div：

• 一个带有z-index: 1 的 div，显示诸如“放在这里上传”之类的文字。
• 另一个带有 z-index: 2 的 div 是全宽/高 position: absolute 并位于前一个 div 的顶部以监视拖动事件。