javascript - div 中的“drop”事件已完成 stopPropagation() 和 PreventDefault()，为什么浏览器会在我放置图片后打开图片？

Question

我正在练习编写文件放置和上传插件。在捕获“drop”事件的 400px * 400px div 中，我已经在处理程序中添加了以下代码:

DropUpload.prototype.drop = function (event) {
...
        event.stopPropagation();
        event.preventDefault();
...
}

但是当我将图片文件放到div中时，浏览器只会打开此页面上的图片，并刷新之前的脚本页面。我通过谷歌搜索得知

      $(document).on('dragenter', function (e) 
            { e.stopPropagation(); e.preventDefault(); });
      $(document).on('dragover', function (e) 
        { e.stopPropagation(); e.preventDefault(); });
      $(document).on('drop', function (e) 
        { e.stopPropagation(); e.preventDefault(); });

可以防止打开图片。但我认为我已经通过添加 stopPropogation() 来防止 drop 事件在 div 元素中冒泡，为什么我还要在 document 元素上再次执行此操作？

是不是因为drop事件先进入document再到达div？请帮助我理解这一点。

Answer 1

由于我犯了一个错误，所以我正在回答我自己的问题。我希望通过分享我的错误可以为您节省一些时间。

为了让拖放区域处理拖放事件，您必须这样做

event.stopPropagation();
event.preventDefault();

对于所有 3

    this.$element.on('dragenter', this.dragenter);
    this.$element.on('dragover', this.dragover);
    this.$element.on('drop', this.drop);

事件。如果您错过了这 3 个事件中任何一个的任何一个功能，新的放置将导致浏览器加载您刚刚放置的文件。

或者您可以禁用文档元素上的默认事件行为，但在拖放区域上执行此操作更符合逻辑，并且看起来不像黑客。

这个MDN document解释一些细节。

真诚的，

尼克