jquery - 为什么 dragleave 事件意外触发？

Question

请在 - http://jsfiddle.net/fSB32/2/ 查看演示

我的意图是在 document 上触发拖动事件时出现叠加层。因此，允许用户将图像拖放到文档的任何位置。当他这样做时，会出现一个很酷的覆盖层。在拖动事件完成时，覆盖应该隐藏自己。

我面临的问题是 dragleave 事件被意外触发(参见演示中的控制台)，导致叠加层一出现就隐藏自己。如果您注释掉隐藏叠加层的代码，那么它自然会出现并且永远不会消失。

Answer 1

我自己解决了这个问题。

原因

将事件沿链向上拖动。因此，令我震惊的是，因为当我使我的叠加层可见时，它触发了 dragenter 并且可能在进一步拖动时 dragleave 被它的 child 触发了冒泡直到我正在听的 parent 。

然而，事实证明只要 dragenter 被触发，就会触发 dragleave，即使 dragenter 目标是一个 child !因此，在我的例子中，当我使叠加层可见时，在其上触发了 dragenter 并且在 document 和 window 上触发了 dragleave 。

修复

因此理想的放置目标不能有任何子对象，这样在其内部拖动就不会触发 dragleave。在我的例子中，放置目标覆盖占据了整个窗口空间，所以在我的例子中，只在覆盖 DOM 上监听 dragleave 就足够了。这解决了 90% 的 myc 问题。

但是，当用户拖动其中的子 div 时出现问题。解决这个问题太容易了。我的要求是让子 div 对鼠标事件不可见。为此，我们拥有神奇的 CSS - pointer-events .将此属性设置为 none 即可。唯一的缺点是 IE 直到 11 才支持它。

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

如果您确实需要支持 11 以下的 IE，那么可以使用一个技巧将一个空的 div 作为放置目标中的子元素，并确保它具有最高的 z-index 并覆盖整个放置目标。这样拖动事件应该只指向这个 DOM，因为所有其他 child 都可以“通过”它看到。