为了它的价值，我使用以下。如果不是特别优雅的话，可能会很好，很明确?

var myDropZone = document.getElementById('drop_zone');

// first, inhibit the default behaviour throughout the window
window.addEventListener('drop', () => { 
  event.preventDefault(); 
} );
window.addEventListener('dragover', () => { 
  event.dataTransfer.dropEffect = 'none'; // dont allow drops
  event.preventDefault(); 
} );

// Next, allow the cursor to show 'copy' as it is dragged over 
// my drop zone but dont forget to stop the event propagating

myDropZone.addEventListener('dragover', () => { 
  event.dataTransfer.dropEffect = 'copy';
  event.stopPropagation(); // important !!
  event.preventDefault();
} );

// In my drop zone, deal with files as they are dropped
myDropZone.addEventListener('drop', myDropHandler);

为了它的价值，我使用以下。如果不是特别优雅的话，可能会很好，很明确?

var myDropZone = document.getElementById('drop_zone');

// first, inhibit the default behaviour throughout the window
window.addEventListener('drop', () => { 
  event.preventDefault(); 
} );
window.addEventListener('dragover', () => { 
  event.dataTransfer.dropEffect = 'none'; // dont allow drops
  event.preventDefault(); 
} );

// Next, allow the cursor to show 'copy' as it is dragged over 
// my drop zone but dont forget to stop the event propagating

myDropZone.addEventListener('dragover', () => { 
  event.dataTransfer.dropEffect = 'copy';
  event.stopPropagation(); // important !!
  event.preventDefault();
} );

// In my drop zone, deal with files as they are dropped
myDropZone.addEventListener('drop', myDropHandler);

默认情况下阻止所有拖放操作可能不是您想要的。至少在某些浏览器中，可以检查拖拽源是否为外部文件。我已经包含了一个函数来检查拖动源是否是这个StackOverflow答案中的外部文件。

修改Digital Plane的答案，你可以这样做:

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);

为了只允许在某些元素上进行拖放，你可以这样做:

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);

在反复折腾之后，我发现这是最稳定的解决方案:

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会导致我的drop zone不再接受任何d-n-d，无论属性是否设置为新的。

试试这个:

document.body.addEventListener('drop', function(e) {
    e.preventDefault();
}, false);