必须阻止dragover默认行为以防页面跳转，用dragenter/dragleave控制高亮开关，拖拽区域需可见且非pointer-events:none，移动端应降级为点击上传。
拖拽进入时 dragover 事件必须阻止默认行为
浏览器默认会把文件拖进页面当成“打开文件”，不阻止就会直接跳转或下载，根本触发不了上传逻辑。高亮失效的第一原因就是漏了这句。
实操建议：
- 给目标区域绑定
dragover事件，第一行必须写event.preventDefault() - 只阻止
dragover就够了，dragenter和drop不需要（但drop里也要preventDefault防止页面打开文件） - 别在父容器上绑而子元素没透传，检查事件是否真的到达了你写的那个
div
用 dragenter 和 dragleave 控制高亮开关
靠 dragover 持续触发来判断“是否在区域内”容易误判——它每秒触发十几次，且子元素进出也会反复触发。真正该用来开关高亮的是 dragenter 和 dragleave。
常见错误现象：拖着文件在区域里移动，高亮闪动；或者拖到子元素上就取消高亮。
实操建议：
- 在
dragenter里加类名（如is-drag-over），触发高亮样式 - 在
dragleave里删类名——但注意：如果鼠标离开的是子元素，不是整个区域，这时不该取消高亮 - 解决嵌套干扰：用
event.relatedTarget判断离开的目标是否仍在当前区域内部，否则才取消高亮
CSS 高亮样式要兼容 input[type="file"] 的隐藏逻辑
很多人把 input[type="file"] 设为 display: none，再用其他元素模拟上传按钮，但拖拽区域必须是实际能接收拖放事件的 DOM 节点——隐藏的 input 不行。
使用场景：既要保持原生文件选择能力，又要自定义视觉和拖拽交互。
实操建议：
- 拖拽区域必须是可见、非
pointer-events: none、有尺寸的元素（哪怕只是height: 0; padding: 20px;） -
input[type="file"]可以用position: absolute; opacity: 0; width: 100%; height: 100%覆盖在区域上，既保留功能又不破坏布局 - 别对
input直接设visibility: hidden或display: none，否则拖拽事件无法穿透到它背后的区域（有些浏览器不支持穿透）
移动端没有 drag 系列事件，得降级处理
iOS Safari 和 Android Chrome（尤其旧版）对 dragenter/dragover 支持极差，甚至完全不触发。指望它们实现拖拽高亮，在手机上基本是空谈。
性能 / 兼容性影响：强行 polyfill 效果差、代码重、还可能干扰原生文件选择。
实操建议：
- 用
Navigator.prototype.maxTouchPoints > 0或'ontouchstart' in window检测是否为触屏设备 - 移动端直接隐藏拖拽提示文字，只保留“点击上传”按钮和
input[type="file"] - 别试图用
touchstart+touchmove模拟拖拽高亮——体验割裂，且文件无法真正拖入
拖拽高亮本质是桌面端的交互契约，硬搬去移动端只会让边界条件爆炸。留个视觉 fallback，比强撑一个半残功能更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
