blocks|key|618339|text|您可以向窗口添加一个事件侦听器，该侦听器在所有拖放事件上调用preventDefault()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|618340|示例：|618341|window.addEventListener("dragover",function(e){
++e+=+e+%7C%7C+event;
++e.preventDefault();
},false);
window.addEventListener("drop",function(e){
++e+=+e+%7C%7C+event;
++e.preventDefault();
},false);|code-block|syntax|javascript|618342|entityMap^0|U|G|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

You can add a event listener to the window that calls <code>preventDefault()</code> on all dragover and drop events. 
Example:

<pre><code>window.addEventListener("dragover",function(e){
 e = e || event;
 e.preventDefault();
},false);
window.addEventListener("drop",function(e){
 e = e || event;
 e.preventDefault();
},false);
</code></pre>

blocks|key|618359|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|618360|document.body.addEventListener('drop',+function(e)+{
++++e.preventDefault();
},+false);|code-block|syntax|javascript|618361|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try this:

<pre><code>document.body.addEventListener('drop', function(e) {
 e.preventDefault();
}, false);
</code></pre>

blocks|key|834020|text|默认情况下阻止所有拖放操作可能不是您想要的。可以检查拖动源是否为外部文件，至少在某些浏览器中是这样。我已经在这个StackOverflow+answer中包含了一个函数来检查拖动源是否是外部文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|834021|修改Digital+Plane的答案，你可以这样做：|834022|function+isDragSourceExternalFile()+{
+++++//+Defined+here:+
+++++//+https://stackoverflow.com/a/32044172/395461
}

window.addEventListener("dragover",function(e){
++++e+=+e+%7C%7C+event;
++++var+IsFile+=+isDragSourceExternalFile(e.originalEvent.dataTransfer);
++++if+(IsFile)+e.preventDefault();
},false);
window.addEventListener("drop",function(e){
++++e+=+e+%7C%7C+event;
++++var+IsFile+=+isDragSourceExternalFile(e.originalEvent.dataTransfer);
++++if+(IsFile)+e.preventDefault();
},false);|code-block|syntax|javascript|834023|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/32044172/395461^0|1K|K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Preventing all drag and drop operations by default might not be what you want. It's possible to check if the drag source is an external file, at least in some browsers. I've included a function to check if the drag source is an external file in this <a href="https://stackoverflow.com/a/32044172/395461">StackOverflow answer</a>. 

Modifying Digital Plane's answer, you could do something like this: 

<pre><code>function isDragSourceExternalFile() {
 // Defined here: 
 // https://stackoverflow.com/a/32044172/395461
}

window.addEventListener("dragover",function(e){
 e = e || event;
 var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer);
 if (IsFile) e.preventDefault();
},false);
window.addEventListener("drop",function(e){
 e = e || event;
 var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer);
 if (IsFile) e.preventDefault();
},false);
</code></pre>

blocks|key|618488|text|要仅允许在某些元素上进行拖放，您可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|618489|window.addEventListener("dragover",function(e){
++e+=+e+%7C%7C+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+%7C%7C+event;
++console.log(e);
++if+(e.target.tagName+!=+"INPUT")+{++//+check+which+element+is+our+target
++++e.preventDefault();
++}++
},false);|code-block|syntax|javascript|618490|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To allow drag-and-drop only on some elements, you could do something like:

<pre><code>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);
</code></pre>

blocks|key|834134|text|在反复尝试之后，我发现这是最稳定的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|834135|​|834136|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";
++}
});|code-block|syntax|javascript|834137|<div+id="dropzone">...</div>|834138|834139|在窗口上无条件地设置effectAllow和dropEffect会导致我的拖放区域不再接受任何d-n-d，无论属性是否设置为新的。|offset|length|style|CODE|834140|entityMap^0|0|0|0|0|0|A|B|M|A|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Y|8|@$N|Z|O|10|P|Q]|$N|11|O|12|P|Q]]|9|@]|A|$]]|$1|R|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|S|$]]

After a lot of fiddling around, I found this to be the stablest solution:

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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";
 }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="dropzone"&gt;...&lt;/div&gt;</code></pre>
</div>
</div>


Setting both <code>effectAllow</code> and <code>dropEffect</code> unconditionally on the window causes my drop zone not to accept any d-n-d any longer, regardless whether the properties are set new or not.

blocks|key|834182|text|对于jQuery，正确答案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|834183|$(document).on({
++++dragover:+function()+{
++++++++return+false;
++++},
++++drop:+function()+{
++++++++return+false;
++++}
});|code-block|syntax|javascript|834184|在这里，return+false将表现为event.preventDefault()和event.stopPropagation()。|offset|length|style|CODE|834185|entityMap^0|0|0|4|C|K|M|17|N|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

For jQuery the correct answer will be:

<pre><code>$(document).on({
 dragover: function() {
 return false;
 },
 drop: function() {
 return false;
 }
});
</code></pre>

Here <code>return false</code> will behave as <code>event.preventDefault()</code> and <code>event.stopPropagation()</code>.

blocks|key|834212|text|为了在一些其他答案中概述的"check+the+target“方法的基础上构建，这里有一个更通用/功能更强的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|834213|function+preventDefaultExcept(predicates)+{
++return+function+(e)+{
++++var+passEvery+=+predicates.every(function+(predicate)+{+return+predicate(e);+})
++++if+(!passEvery)+{
++++++e.preventDefault();
++++}
++};
}|code-block|syntax|javascript|834214|调用方式如下：|834215|function+isDropzone(e)+{+return+e.target.id+===+'dropzone';+}
function+isntParagraph(e)+{+return+e.target.tagName+!==+'p';+}

window.addEventListener(
++'dragover',
++preventDefaultExcept([isDropzone,+isntParagraph])
);
window.addEventListener(
++'drop',
++preventDefaultExcept([isDropzone])
);|834216|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To build on the "check the target" method outlined in a few other answers, here is a more generic/functional method:

<pre><code>function preventDefaultExcept(predicates) {
 return function (e) {
 var passEvery = predicates.every(function (predicate) { return predicate(e); })
 if (!passEvery) {
 e.preventDefault();
 }
 };
}
</code></pre>

Called like:

<pre><code>function isDropzone(e) { return e.target.id === 'dropzone'; }
function isntParagraph(e) { return e.target.tagName !== 'p'; }

window.addEventListener(
 'dragover',
 preventDefaultExcept([isDropzone, isntParagraph])
);
window.addEventListener(
 'drop',
 preventDefaultExcept([isDropzone])
);
</code></pre>

blocks|key|618687|text|我有一个超文本标记语言object+(embed)来填充页面的宽度和高度。@digital-plane的答案适用于普通网页，但如果用户放在嵌入的对象上，则不起作用。所以我需要一个不同的解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|618688|如果我们切换到使用event+capture+phase，我们可以在嵌入式对象接收事件之前获取它们(请注意事件侦听器调用末尾的true值)：|618689|//+document.body+or+window
document.body.addEventListener("dragover",+function(e){
++e+=+e+%7C%7C+event;
++e.preventDefault();
++console.log("over+true");
},+true);

document.body.addEventListener("drop",+function(e){
++e+=+e+%7C%7C+event;
++e.preventDefault();
++console.log("drop+true");
},+true);|code-block|syntax|javascript|618690|使用以下代码(基于@digital-plane的答案)，页面成为拖动目标，它阻止对象嵌入捕获事件，然后加载我们的图像：|618691|document.body.addEventListener("dragover",+function(e){
++e+=+e+%7C%7C+event;
++e.preventDefault();
++console.log("over+true");
},+true);

document.body.addEventListener("drop",function(e){
++e+=+e+%7C%7C+event;
++e.preventDefault();
++console.log("Drop+true");

++//+begin+loading+image+data+to+pass+to+our+embed
++var+droppedFiles+=+e.dataTransfer.files;
++var+fileReaders+=+{};
++var+files+=+{};
++var+reader;

++for+(var+i+=+0;+i+<+droppedFiles.length;+i%2B%2B)+{
++++files[i]+=+droppedFiles[i];+//+bc+file+is+ref+is+overwritten
++++console.log("File:+"+%2B+files[i].name+%2B+"+"+%2B+files[i].size);
++++reader+=+new+FileReader();
++++reader.file+=+files[i];+//+bc+loadend+event+has+no+file+ref

++++reader.addEventListener("loadend",+function+(ev,+loadedFile)+{
++++++var+fileObject+=+{};
++++++var+currentReader+=+ev.target;

++++++loadedFile+=+currentReader.file;
++++++console.log("File+loaded:"+%2B+loadedFile.name);
++++++fileObject.dataURI+=+currentReader.result;
++++++fileObject.name+=+loadedFile.name;
++++++fileObject.type+=+loadedFile.type;
++++++//+call+function+on+embed+and+pass+file+object
++++});

++++reader.readAsDataURL(files[i]);
++}

},+true);|618692|在Mac上的Firefox上测试过。|618693|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase^0|B|6|J|5|0|1R|4|9|J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1C|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1E|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

I have an HTML <code>object</code> (<code>embed</code>) that fills the width and height of the page. The answer by @digital-plane works on normal web pages but not if the user drops onto an embedded object. So I needed a different solution. 

If we switch to using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase" rel="nofollow noreferrer">event capture phase</a> we can get the events before the embedded object receives them (notice the <code>true</code> value at the end of the event listener call): 

<pre><code>// document.body or window
document.body.addEventListener("dragover", function(e){
 e = e || event;
 e.preventDefault();
 console.log("over true");
}, true);

document.body.addEventListener("drop", function(e){
 e = e || event;
 e.preventDefault();
 console.log("drop true");
}, true);
</code></pre>

Using the following code (based on @digital-plane's answer) the page becomes a drag target, it prevents object embeds from capturing the events and then loads our images: 

<pre><code>document.body.addEventListener("dragover", function(e){
 e = e || event;
 e.preventDefault();
 console.log("over true");
}, true);

document.body.addEventListener("drop",function(e){
 e = e || event;
 e.preventDefault();
 console.log("Drop true");

 // begin loading image data to pass to our embed
 var droppedFiles = e.dataTransfer.files;
 var fileReaders = {};
 var files = {};
 var reader;

 for (var i = 0; i &lt; droppedFiles.length; i++) {
 files[i] = droppedFiles[i]; // bc file is ref is overwritten
 console.log("File: " + files[i].name + " " + files[i].size);
 reader = new FileReader();
 reader.file = files[i]; // bc loadend event has no file ref

 reader.addEventListener("loadend", function (ev, loadedFile) {
 var fileObject = {};
 var currentReader = ev.target;

 loadedFile = currentReader.file;
 console.log("File loaded:" + loadedFile.name);
 fileObject.dataURI = currentReader.result;
 fileObject.name = loadedFile.name;
 fileObject.type = loadedFile.type;
 // call function on embed and pass file object
 });

 reader.readAsDataURL(files[i]);
 }

}, true);
</code></pre>

Tested on Firefox on Mac.

blocks|key|834340|text|我为多个上传区域使用了一个类选择器，所以我的解决方案采用了这种不那么纯粹的形式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|834341|基于Axel+Amthor的答案，依赖于jQuery+(别名为$)|834342|_stopBrowserFromOpeningDragAndDropPDFFiles+=+function+()+{

++++++++_preventDND+=+function(e)+{
++++++++++++if+(!$(e.target).is($(_uploadBoxSelector)))+{
++++++++++++++++e.preventDefault();
++++++++++++++++e.dataTransfer.effectAllowed+=+'none';
++++++++++++++++e.dataTransfer.dropEffect+=+'none';
++++++++++++}
++++++++};

++++++++window.addEventListener('dragenter',+function+(e)+{
++++++++++++_preventDND(e);
++++++++},+false);

++++++++window.addEventListener('dragover',+function+(e)+{
++++++++++++_preventDND(e);
++++++++});

++++++++window.addEventListener('drop',+function+(e)+{
++++++++++++_preventDND(e);
++++++++});
++++},|code-block|syntax|javascript|834343|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I am using a class selector for multiple upload areas so my solution took this less pure form

Based on Axel Amthor's answer, with dependency on jQuery (aliased to $)

<pre><code>_stopBrowserFromOpeningDragAndDropPDFFiles = function () {

 _preventDND = function(e) {
 if (!$(e.target).is($(_uploadBoxSelector))) {
 e.preventDefault();
 e.dataTransfer.effectAllowed = 'none';
 e.dataTransfer.dropEffect = 'none';
 }
 };

 window.addEventListener('dragenter', function (e) {
 _preventDND(e);
 }, false);

 window.addEventListener('dragover', function (e) {
 _preventDND(e);
 });

 window.addEventListener('drop', function (e) {
 _preventDND(e);
 });
 },
</code></pre>

I'm adding an html5 drag and drop uploader to my page.

When a file is dropped into the upload area, everything works great.

However, if I accidentally drop the file outside of the upload area, the browser loads the local file as if it is a new page.

How can I prevent this behavior?

Thanks!

Prevent browser from loading a drag-and-dropped file

jQuery

我正在向我的页面添加一个html5拖放上传器。当一个文件被放入上传区时，一切都会正常工作。但是，如果我不小心将文件放在上载区域之外，浏览器会加载本地文件，就好像它是一个新页面一样。我怎样才能防止这种行为？谢谢!

问阻止浏览器加载拖放文件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阻止浏览器加载拖放文件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阻止浏览器加载拖放文件
EN