阻止浏览器加载拖放文件
阻止浏览器加载拖放文件
提问于 2011-07-20 11:09:19
我正在向我的页面添加一个html5拖放上传器。
当一个文件被放入上传区时，一切都会正常工作。
但是，如果我不小心将文件放在上载区域之外，浏览器会加载本地文件，就好像它是一个新页面一样。
我怎样才能防止这种行为？
谢谢!
回答 9
Stack Overflow用户
回答已采纳
发布于 2011-07-20 11:27:21
您可以向窗口添加一个事件侦听器，该侦听器在所有拖放事件上调用preventDefault()。
示例：
window.addEventListener("dragover",function(e){
e = e || event;
e.preventDefault();
},false);
window.addEventListener("drop",function(e){
e = e || event;
e.preventDefault();
},false);Stack Overflow用户
发布于 2016-02-09 00:08:19
在反复尝试之后，我发现这是最稳定的解决方案：
var dropzoneId = "dropzone";
window.addEventListener("dragenter", function(e) {
if (e.target.id != dropzoneId) {
e.preventDefault();
e.dataTransfer.effectAllowed = "none";
e.dataTransfer.dropEffect = "none";
}
}, false);
window.addEventListener("dragover", function(e) {
if (e.target.id != dropzoneId) {
e.preventDefault();
e.dataTransfer.effectAllowed = "none";
e.dataTransfer.dropEffect = "none";
}
});
window.addEventListener("drop", function(e) {
if (e.target.id != dropzoneId) {
e.preventDefault();
e.dataTransfer.effectAllowed = "none";
e.dataTransfer.dropEffect = "none";
}
});<div id="dropzone">...</div>
在窗口上无条件地设置effectAllow和dropEffect会导致我的拖放区域不再接受任何d-n-d，无论属性是否设置为新的。
Stack Overflow用户
发布于 2015-10-24 21:11:20
要仅允许在某些元素上进行拖放，您可以执行以下操作：
window.addEventListener("dragover",function(e){
e = e || event;
console.log(e);
if (e.target.tagName != "INPUT") { // check which element is our target
e.preventDefault();
}
},false);
window.addEventListener("drop",function(e){
e = e || event;
console.log(e);
if (e.target.tagName != "INPUT") { // check which element is our target
e.preventDefault();
}
},false);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6756583
复制相关文章
相似问题