Appearance
多个上传组件监听不到粘贴事件、
1️⃣ 浏览器 paste 事件触发规则
- Paste 事件 只有在可编辑或可聚焦的元素上才会触发
- 可编辑元素包括:
<input><textarea>[contenteditable="true"]的元素
- 可聚焦元素指:
tabindex >= 0- 默认可聚焦的表单元素
否则,即使绑定了**document.addEventListener('paste', ...),浏览器可能阻止事件冒泡到 document。**
2️⃣ 你之前的问题根源
- 单上传组件时,拖拽区或内部 input 正好可能获得了焦点 → document paste 能触发
- 多上传组件时,多个
<el-upload>的内部 input 会抢占焦点 → document paste 被阻止 - hover 时 DOM 可拿到,但不可聚焦 → document paste 不触发
所以,即使你的逻辑完全正确,事件仍然无法捕获。
3️⃣ 为什么加上tabindex和contenteditable 后生效
tabindex="0"- 让 div 成为可聚焦元素
- hover 时调用
el.focus()→ 该元素获得焦点 - 浏览器允许 Ctrl+V 粘贴事件冒泡
contenteditable="true"- 元素可编辑 → 浏览器允许 paste 事件在其上触发
- paste 会冒泡到 document → 你的指令能捕获
本质就是“让鼠标悬停的 div 成为浏览器认为合法的粘贴目标”,从而 document paste 可以触发。
闭包捕获旧值是 JS 的正常行为:闭包里引用了定义时的变量