为什么子元素会导致调用'dropleave'(拖放文件上传)？

Question

我有一个HTML5 drag-n-drop脚本，允许用户在#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内拖动文件时，会多次调用draginter（）和draglive（），即使拖动仍在#droparea内。如果删除子元素（#child1和#child2），问题就消失了，因为子元素也消失了。如何保留子元素并防止它们扰乱拖动事件？

我在Stackoverflow和谷歌上搜索了几个小时，但没有得到太多帮助。我在Stackoverflow上发现了以下问题：如何防止子元素干扰HTML5拖放事件？不过，我不知道为什么它有效。

我尝试过将两个div元素放在一起（通过CSS定位）。最上面的div附加了拖动事件，而最下面的div有子元素。我不喜欢这种方法，因为它不适用于我页面的其他部分，也不允许鼠标点击与最底部的div交互。

Answer 1

这是HTML5 drag-n-drop规范的一个问题。阅读这篇长篇文章以获得解释。。。

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