Javascript jQuery.on（“drop”未触发

我试图实现从桌面到浏览器窗口的文件拖放。我使用jQuery将三个事件附加到HTML元素，如下代码所示：

$("html").on("dragover", function() {
    $(this).addClass('dragging');
});

$("html").on("dragleave", function() {
    $(this).removeClass('dragging');
});

$("html").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    alert("Dropped!");
});

“dragover”和“dragleave”事件工作正常，当我将文件拖到页面上时，会在整个页面周围显示一个插入边框，如果我再次将文件拖出去，则会将其删除

然而，“drop”事件似乎根本没有触发，被删除的文件只是在浏览器窗口中打开

有人知道为什么这个事件没有发生吗

---

顺便说一句，我正在最新版本的Chrome中测试这一点，并使用jQuery 1.10.2。

您需要取消所有事件

$("html").on("dragover", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $(this).addClass('dragging');
});

$("html").on("dragleave", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $(this).removeClass('dragging');
});

$("html").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    alert("Dropped!");
});

---

除Christian的解决方案外，这可以缩短为：

$（“#我的dropzone”）
//对“坠落”事件至关重要
.on（'dragover'，false）
.on（'drop'，函数（e）{
//做点什么
返回false；
});

适用于以下任何人；这是额外的取消“dragover”导致的下降，然后火。取消dragenter和dragleave是不够的。正如@Christian所说的，你必须全部取消它们。你能解释一下为什么我需要删除/取消CSSIf吗？如果你指的是“$（this）.removeClass（'draging'）”语句，这只是在发生拖动时设置页面样式的OPs方法。这与拖放操作无关。因为我首先在这里结束了与谷歌的对话，也许可以看看答案，以及指向的参考链接，其中解释了为什么你必须取消这些活动！确保您先等待加载DOM。我没有。经典错误。重复问题：潜在答案：如何获取拖放区上拖动的元素？例如，一个文件被拖到zone？2020，而这个答案中只有一行的注释就省去了我很多麻烦