为什么子元素会导致调用“dropleave”（拖放文件上传）？答案

【问题标题】：Why do child elements cause 'dropleave' to be called (drag-n-drop file upload)?为什么子元素会导致调用“dropleave”（拖放文件上传）？
【发布时间】：2012-04-19 18:37:31
【问题描述】：

我有一个 HTML5 拖放脚本，允许用户在#droparea 中拖放文件。 #droparea div 的子元素也是 div 元素。

<div id="droparea">
    <div id="showif_no_dragover">Drag files here!</div>
    <div id="showif_dragover">Drop the files!</div>
</div>

相关的javascript/jquery是：

var droptarget = "#droparea";
$(droptarget).live('dragenter', dragEnter);
$(droptarget).live('dragleave', dragExit);
$(droptarget).live('dragover', nothing);
$(droptarget).live('drop', dropGo);

（附带问题：我应该在这里使用 .live()、.on() 还是 .bind()？）

我在这里创建了一个带有一些附加代码的示例 jsFiddle：http://jsfiddle.net/PwFr9/3/

如果您查看控制台，您会注意到当您在#droparea 中拖动文件时，会多次调用dragenter() 和dragleave()，即使拖动仍在#droparea 中。如果删除子元素（#child1 和#child2），问题就消失了，因为子元素消失了。如何保留子元素并防止它们弄乱拖动事件？

我已经在 Stackoverflow 和 Google 上搜索了几个小时，但没有得到太多帮助。我在 Stackoverflow 上发现了这个问题：How to keep child elements from interfering with HTML5 dragover and drop events? 不过，我不知道它为什么会起作用。

我尝试将 2 个 div 元素彼此叠放（通过 CSS 定位）。最顶部的 div 附加了拖动事件，而最底部的 div 具有子元素。我不喜欢这种方法，因为它不适用于我页面的其余部分，并且不允许鼠标单击与最底部的 div 交互。

【问题讨论】：

标签： javascript jquery drag-and-drop parent-child

【解决方案1】：

这是 HTML5 拖放规范的问题。阅读这篇冗长的文章以获得解释......

http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

【讨论】：