即使在 dragenter 和 dragover 上使用 event.preventDefault 也不会触发 Drop 事件答案

【问题标题】：Drop event not firing even with event.preventDefault on dragenter and dragover即使在 dragenter 和 dragover 上使用 event.preventDefault 也不会触发 Drop 事件
【发布时间】：2021-10-01 12:53:42
【问题描述】：

我正在努力触发 ondrop 事件。即使在 dragenter 和 dragover 上调用 event.preventDefault 它也不会触发。实际上只有 onDragEnter 它被解雇了。

style

.drop_zone {
 border: 5px black dashed;
 width: 300px;
 height: 200px;
}

 HTML
<body>
    <div class="drop_zone" 
        ondragenter="onDragEnter(event)"
        ondragover="onDragOver(event)"
        ondrop="onDrop(event)" >
        <p>Drag one or more files to this Drop Zone ...</p>
    </div>
    <script src="./index.js"></script>
</body>

javascript
function onDrop(e){
    e.preventDefault();
}

function onDragEnter(e){
    e.preventDefault();
}

function onDragOver(e){
    e.preventDefault();
}

【问题讨论】：

为我工作。是什么让你说它不起作用？您的函数实际上并没有做任何事情，所以我不确定您的期望，但我在每个函数中添加了 console.log，并且我在每个函数中都得到了事件，甚至丢弃了。
我只是希望他们现在被解雇。

标签： javascript html drag-and-drop

【解决方案1】：

$(document).ready(function() {
    var holder = document.getElementById('holder');
    holder.ondragover = function () { this.className = 'hover'; return false; };
    holder.ondrop = function (e) {
      this.className = 'hidden';
      e.preventDefault();
      var file = e.dataTransfer.files[0];
      var reader = new FileReader();
      reader.onload = function (event) {
          document.getElementById('image_droped').className='visible'
          $('#image_droped').attr('src', event.target.result);
      }
      reader.readAsDataURL(file);
    };
});

.holder_default {
    width:500px; 
    height:150px; 
    border: 3px dashed #ccc;
}

#holder.hover { 
    width:400px; 
    height:150px; 
    border: 3px dashed #0c0 !important; 
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

<!DOCTYPE html>

<html>
    <head>
        <title> HTML 5 </title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
    </head>
    <body>
      <form method="post" action="http://example.com/">
        <div id="holder" style="" id="holder" class="holder_default">
          <img src="" id="image_droped" width="200" style="border: 3px dashed #7A97FC;" class=" hidden"/>
        </div>
      </form>
    </body>
</html>

【讨论】：

他从来没有提到过使用jquery

【解决方案2】：

感谢您的帮助。

实际上是它被触发的事件。这是一个控制台错误。我在 onDropHandler 方法中设置了一个调试器和一个断点，但它没有命中它们。但是，如果我使用下面的 console.log，它会显示我的对象。

function onDrop(e){
    console.log(e);
    console.log(e.dataTransfer.files[0])
    e.preventDefault();
}

【讨论】：