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

Question

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

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

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

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

Answer 1

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

全 Angular position: fixed 背景 div，它包含两个 div:

• 一个带有 z-index: 1 的 div，用于显示诸如“拖放到此处以上传”之类的文本。
• 另一个具有 z-index: 2 的 div，它是全宽/高度 position: absolute 并且位于前一个 div 之上以观察拖动事件。<