dragover事件本身不触发样式变化，需依赖:drop-target伪类（仅chromium 111+支持）或js手动增删class实现拖拽经过时的视觉反馈。
dragover 事件本身不触发样式变化，得靠 CSS :drop-target 伪类或 JS 手动加 class
浏览器默认不会因为元素处于 dragover 状态就自动应用样式——哪怕你拖着文件/元素从它上面经过，div 还是那个 div。真正能响应拖拽经过的 CSS 机制只有两个：一是实验性但已进入标准草案的 :drop-target（仅 Chromium 111+ 支持），二是更通用、必须配合 JS 的手动 classList.add() / remove() 方案。
常见错误现象：
– 写了 div:hover { background: #eee; }，结果拖拽时完全没反应（hover 不覆盖拖拽状态）
– 直接写 div:drop-target { border: 2px dashed #007bff; }，但在 Firefox 或旧版 Chrome 里完全无效
- 使用场景：文件上传区域高亮、列表项排序预占位、拖拽到容器边缘时展开嵌套区
- 推荐做法：监听
dragenter和dragleave，在目标元素上增删is-dragging-over类，再用 CSS 控制样式 - 注意
dragleave触发不稳定：子元素会冒泡触发，需用e.relatedTarget判断是否真离开了容器边界
Chrome/Firefox/Safari 对 dragover 样式支持差异极大
别指望一套 CSS 能跨浏览器生效。:drop-target 在 Chrome/Edge 111+ 可用，Firefox 完全不识别，Safari 未实现；而 dragover 事件本身虽全平台支持，但默认行为（比如显示禁止图标）和是否允许样式响应，各引擎处理逻辑不同。
典型兼容性陷阱：
– Safari 中，若没在 dragover 回调里调用 e.preventDefault()，拖拽经过时根本不会触发 drop，连带 dragenter/dragleave 都可能被忽略
– Firefox 对嵌套容器的 dragleave 判定更激进，容易误判离开
- 必须在
dragover里写e.preventDefault()，否则 Chrome/Safari 会拒绝后续drop - 不要依赖
:drop-target做核心交互逻辑，只当渐进增强用 - 移动端 Safari 不支持桌面级拖拽 API，这类样式逻辑天然失效
如何避免频繁 add/remove class 导致重排或闪烁
拖拽过程中 dragenter 和 dragleave 可能高频触发，尤其鼠标移动快或容器有子元素时。直接每次调用 element.classList.add("xxx") 或 .remove()，在复杂 DOM 下可能引发不必要的样式重计算。
实操建议：
– 用 requestAnimationFrame 节流样式切换，避免帧内多次操作
– 检查当前 class 状态再操作，避免无意义重复调用
– 优先用 transition 控制视觉变化，而非 JS 控制 opacity/border 等触发布局的属性
- 示例节流写法：
let isOver = false;<br>el.addEventListener('dragenter', () => {<br> if (!isOver) {<br> requestAnimationFrame(() => el.classList.add('is-dragging-over'));<br> isOver = true;<br> }<br>});<br>el.addEventListener('dragleave', () => {<br> if (isOver) {<br> requestAnimationFrame(() => el.classList.remove('is-dragging-over'));<br> isOver = false;<br> }<br>}); - CSS 推荐用
background-color、box-shadow、transform这类 GPU 加速属性做过渡 - 绝对避免在
dragover里读取offsetHeight或写入内联style.width，这会强制同步布局
dragenter/dragleave + class 切换，再把性能细节扣严一点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
