Question

我试图实现一个简单的HTML5拖放图像上传器，一切运行良好。我在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，但如果此人缺少上传者div，浏览器会在另一个页面中打开图像。我还尝试在HTML标记中的元素上添加droppable = 'false'，但结果相同。

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

Answer 1

尝试阻止dragover事件

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

禁用将图像从桌面拖动到html

1 个答案: