拖拽上传场景中，修改innerHTML为何使evt.preventDefault()失效？

我正在开发一套拖拽上传系统，核心功能是将拖拽到指定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>

原本通过evt.preventDefault()可以阻止浏览器打开图片的默认行为，但取消注释修改thumbnail-drop-text元素innerHTML的代码后，浏览器又恢复了默认行为，这是为什么？该如何修复？

原因分析 #

这个问题的核心是DOM修改操作干扰了事件处理的时机。当你在drop事件的处理函数中同步修改innerHTML时，浏览器会立即触发重排和重绘操作，这个过程会占用主线程，可能导致evt.preventDefault()的效果没有被浏览器正确处理——浏览器还没来得及完成阻止默认行为的逻辑，就已经开始执行打开文件的默认操作了。

另外还有一个潜在因素：thumbnail-drop-text元素的z-index:1，它是覆盖在dropContainer之上的。虽然你给dropContainer绑定了阻止默认的事件，但拖拽过程中鼠标实际是在thumbnail-drop-text上，而这个元素没有绑定dragover/dragenter的阻止默认事件。原本因为事件冒泡，dropContainer的事件处理能生效，但修改innerHTML导致DOM重绘后，事件冒泡的流程可能被干扰，进一步加剧了默认行为无法被阻止的问题。

修复方案 #

有两种简单有效的修复方式，你可以根据需求选择：

方案1：异步修改DOM

把修改innerHTML的操作放到异步队列中，确保evt.preventDefault()先完全生效，再进行DOM更新。比如用setTimeout：

dropContainer.ondrop = function(evt) {
 evt.preventDefault();
 fileInput.files = evt.dataTransfer.files;
 // 异步更新DOM，避免干扰事件处理
 setTimeout(() => {
   document.getElementById('thumbnail-drop-text').innerHTML = "<small>hello</small>";
 }, 0);
};

方案2：给上层元素也绑定阻止默认事件

既然thumbnail-drop-text覆盖在拖拽区域上方，直接给它也绑定dragover和dragenter的阻止默认事件，确保无论鼠标在哪个元素上，都能阻止浏览器的默认拖拽行为：

// 给dropContainer和thumbnail-drop-text都绑定阻止默认的事件
const preventDefaultHandler = (evt) => evt.preventDefault();
dropContainer.ondragover = dropContainer.ondragenter = preventDefaultHandler;
document.getElementById('thumbnail-drop-text').ondragover = document.getElementById('thumbnail-drop-text').ondragenter = preventDefaultHandler;

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

这两种方案都能解决你的问题，方案1更轻量，方案2则从根源上避免了上层元素的事件干扰，更稳定。

内容的提问来源于stack exchange，提问作者BRHSM