javascript - 为什么即使调用 evt.preventDefault();，更改 JavaScript 中的内部 html 也会导致默认操作？

Question

我正在开发一个拖放系统，其中有一个文件输入，它接受放置在 div 上的文件并将其设置为 <input type=file> 的值。元素:

 <div>
        <div id="dropContainer" style="border:1px dashed grey;height:16vh;">
            <input type="file" id="fileInput" name="thumbnail" style="display:none; z-index:0"/>
        </div>

    </div>
    <div id="thumbnail-drop-text" style="margin-top: -9.5vh; margin-bottom: 7vh; z-index:1; text-align:center">
        <small> hey </small>
    </div>
   <script>
    dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
        evt.preventDefault();
    };

    dropContainer.ondrop = function(evt) {
        evt.preventDefault();
        fileInput.files = evt.dataTransfer.files;
        //document.getElementById('thumbnail-drop-text').innerHTML = "<small>hello</small>";
    };
</script>

此代码应阻止其执行的默认操作(在浏览器中打开图像文件)。现在我想测试它是否有效，因此取消注释 //document.getElementById('thumbnail-drop-text').innerHTML = "<small>hello</small>";

当我这样做时，他的浏览器恢复正常行为(就好像代码中没有 evt.preventDefault(); 一样)

这是为什么呢？我该如何解决这个问题？

Answer 1

在将任何图像或其他内容放入其中之前，您需要先打开元素的designMode。尝试使用此代码并在放置图像后在控制台中查看。

var dropContainer = document.getElementById('dropContainer');
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
  dropContainer.designMode = "on";
  // dropContainer.setAttribute("contenteditable", true);
  console.log('hover');
  evt.preventDefault();
};

dropContainer.ondrop = function(evt) {
  console.log('drop');
  evt.preventDefault();
  fileInput.files = evt.dataTransfer.files;
  dropContainer.designMode = "off";
   // dropContainer.removeAttribute("contenteditable");
  //document.getElementById('thumbnail-drop-text').innerHTML = "<small>hello</small>";
};

dropContainer.dragend = function() { // if user drop outside of droppable area.
   // dropContainer.removeAttribute("contenteditable");
  dropContainer.designMode = "off";
}