Skip to content

多个上传组件监听不到粘贴事件、

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️⃣ 为什么加上tabindexcontenteditable 后生效

  • tabindex="0"
    • 让 div 成为可聚焦元素
    • hover 时调用el.focus() → 该元素获得焦点
    • 浏览器允许 Ctrl+V 粘贴事件冒泡
  • contenteditable="true"
    • 元素可编辑 → 浏览器允许 paste 事件在其上触发
    • paste 会冒泡到 document → 你的指令能捕获

本质就是“让鼠标悬停的 div 成为浏览器认为合法的粘贴目标”,从而 document paste 可以触发。

闭包捕获旧值是 JS 的正常行为:闭包里引用了定义时的变量

基于 Obsidian + VitePress 构建