我有一个 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 上发现了这个问题：如何防止子元素干扰 HTML5 拖放事件？ 不过，我不知道它为什么会起作用。
我尝试将 2 个 div 元素放在一起（通过 CSS 定位）。最顶部的 div 附加了拖动事件，而最底部的 div 具有子元素。我不喜欢这种方法，因为它不适用于我页面的其余部分，并且不允许鼠标单击与最底部的 div 交互。