拖放文件上传时向drop-zone拖放图片后drop事件的addEventListener未生效，边框无法恢复虚线

边框拖放后不恢复的核心是缺失拖拽API必须的默认行为拦截逻辑，导致事件链路断掉了，具体细节：

• 按照原生HTML拖拽规范，网页元素默认不支持接收文件放置。如果想让元素能正常响应drop事件，必须在dragover回调里调用e.preventDefault()，否则哪怕你在dropzone上松开鼠标完成放置，drop事件根本不会被触发。
  现有代码里dragover只做了添加drop-zone__over类的操作，没有做默认行为拦截，松开鼠标时写在drop回调里的移除类名逻辑永远跑不到，类会一直挂在元素上，边框自然停留在实线状态。
• 之前绑定在dropzone上的dragend监听器是无效的。dragend事件是在被拖拽的源元素上触发的，从系统拖入文件时，拖拽源是系统层面的文件资源管理器，这个事件根本不会冒泡到页面里的dropzone元素上，完全起不到清理类名的作用。
• 就算补全了dragover的拦截逻辑，drop回调里也必须加e.preventDefault()，否则浏览器会直接导航打开你拖入的文件，跳转到预览页，自然看不到页面上的边框恢复效果。

之前“拖入后移出区域边框能恢复”的场景，是因为拖动离开dropzone时触发了dragleave事件执行了移除逻辑，只要在dropzone内部直接松开鼠标，因为缺了preventDefault导致事件流程断档，类名就删不掉了。

给所有拖拽相关回调补上必须的拦截逻辑，完整可用的JS实现：

document.querySelectorAll(".drop-zone__input").forEach(inputElement => {
  const dropZoneElement = inputElement.closest(".drop-zone");

  // 拖拽经过区域时，添加高亮类并拦截默认行为
  dropZoneElement.addEventListener("dragover", (e) => {
    e.preventDefault();
    e.stopPropagation();
    dropZoneElement.classList.add("drop-zone__over");
  });

  // 拖拽离开区域时，移除高亮类
  dropZoneElement.addEventListener("dragleave", (e) => {
    e.preventDefault();
    dropZoneElement.classList.remove("drop-zone__over");
  });

  // 完成放置操作时的逻辑
  dropZoneElement.addEventListener("drop", (e) => {
    e.preventDefault();
    e.stopPropagation();
    // 首先清理高亮状态，再处理后续上传逻辑
    dropZoneElement.classList.remove("drop-zone__over");

    // 后续可以在这里补充读取文件、生成缩略图的上传逻辑
    console.log("拖入的文件列表", e.dataTransfer.files);
  });
});

之前绑定的dragend事件监听，因为触发源的问题，对从系统拖入文件的场景没有实际作用，可以根据需求保留（后续如果要支持页面内元素拖拽的话会生效），但不要依赖它做类名清理逻辑。

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