javascript - 禁止将图像从桌面拖动到 html

Question

我试图实现一个简单的 HTML5 拖放图像 uploader ，一切都运行良好。我在 html 中有一个小的 div，带有一个简单的 js 事件处理程序，看起来像这样

$('#uploader').on('dragover', function(e){
  ...
}).on('dragenter', function(e){
  ...
}).on('dragleave', function(e){
  ...
}).on('drop', function(e){
  ...
})

唯一的小问题是，如果一个人错过了那个 div 并且不小心将他的图像放到了它之外，浏览器会产生它的默认事件(在同一个选项卡中打开图像)，这不是很好。

我试图通过这样做来禁用它

$(elem).on('drop', function(e){
    if (e.originalEvent.preventDefault) e.originalEvent.preventDefault();
    if (e.originalEvent.stopPropagation) e.originalEvent.stopPropagation();
    return false;
})

我尝试了不同的元素，如文档、正文、另一个父 div，但如果此人缺少 uploader div，浏览器仍然会在另一个页面中打开图像。我还尝试在 HTML 标记的元素上添加 droppable = 'false' 但结果相同。

有什么办法可以防止这种行为吗？

Answer 1

尝试阻止 dragover 事件

$(document).on('dragover drop', function(e){
  return false;
});