为什么dragleave事件意外启动？

Question

请参阅演示在 - http://jsfiddle.net/fSB32/2/

我的本意是，当拖动事件是在document解雇出现了重叠。因此，用户可以在文档的任何位置拖放图像。当他这样做时，出现一个很酷的覆盖。在拖动事件完成时，叠加层应该隐藏自身。

我面临的问题是dragleave事件意外启动（请参阅演示中的控制台），导致覆盖层在出现时立即隐藏自身。如果您将代码注释掉以隐藏覆盖图，那么它自然会出现并永远不会显示。

Answer 1

我自己想出了这个问题。

原因

拖动事件会引发连锁反应。所以，让我感到震惊的是，因为当我使覆盖层可见时，它触发了dragenter，并且可能进一步拖动它的孩子触发它，直到我正在倾听的父母为止。

但是，事实证明，只要dragenter被触发，即使dragenter目标是孩子，也会触发dragleave！因此，就我而言，当我将覆盖图显示为可见时，dragenter已触发，dragleave在document和window上触发。

的修复

所以理想的放置目标一定不能有任何的孩子，使内本身拖着不触发dragleave。在我的情况下，放置目标覆盖层占用了整个窗口空间，所以在我的情况下，仅在覆盖DOM上监听dragleave就足够了。这固定了90％的myc问题。

但是，当用户在里面拖动了儿童div时出现了问题。解决这个问题太简单了。我的要求是我让孩子div对鼠标事件不可见。为此我们有神奇的CSS - pointer-events。设置这个属性为none是诀窍。唯一的缺点是，这是不支持IE，直到11

观看演示http://jsfiddle.net/fSB32/5/

如果你需要支持低于11 IE，然后一招可以用来把一个空div为孩子放置目标并确保它具有最高的z-索引，并且它覆盖了完整的放置目标。这种方式拖动事件应该只针对这个DOM，因为所有其他的孩子都可以“通过”它。