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 并意外地将其图像放到了该 div 之外，则浏览器会执行默认事件(在同一选项卡中打开图像)，这并不是很好。

我尝试通过这样做来禁用此功能

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

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

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

Answer 1

尝试阻止拖拽事件

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