核心是：必须在事件中立即调用 event.preventdefault()，且读写剪贴板只能用 event.clipboarddata；navigator.clipboard 是异步 api，不受 preventdefault() 控制。
直接拦截并自定义 copy/paste 行为，核心就两条：必须在事件中调用 event.preventDefault()，且读写操作必须通过 event.clipboardData（不是 navigator.clipboard）——后者是异步 API，不参与事件流，也不受 preventDefault() 控制。
copy 事件里怎么改掉用户要复制的内容
触发时机是用户按下 Ctrl+C 或右键选“复制”，此时你有机会替换掉最终进剪贴板的文本或 HTML。
- 必须立刻调用
event.preventDefault()，否则event.clipboardData是只读的，setData()会静默失败 - 用
event.clipboardData.setData('text/plain', '新文本')写纯文本；也可加setData('text/html', '<b>加粗</b>')提供富文本备选 - 不要依赖
window.getSelection().toString()获取内容——如果用户没选中任何东西（比如点了空白处再 Ctrl+C），它返回空字符串；建议 fallback 到目标元素的textContent或业务逻辑默认值 - 注意兼容性：
clipboardData在所有主流浏览器中都可用，包括 iOS Safari 15+ 和微信 X5 内核（但后者对items不支持，不影响setData）
paste 事件里怎么读取并过滤粘贴内容
用户 Ctrl+V 时，你可以先拦下、解析、清洗，再决定是否插入，或插入什么。
- 同样必须调用
event.preventDefault()，否则浏览器会按默认逻辑把内容塞进焦点元素（尤其是contenteditable容器里，可能插到末尾） - 用
event.clipboardData.getData('text/plain')拿纯文本；getData('text/html')拿原始 HTML（含样式、图片 base64 等） - 若需识别图片，优先检查
event.clipboardData.items，遍历每个item.type.startsWith('image/')；Safari 15.x 及更早、微信 X5 内核不支持items，得 fallback 到event.clipboardData.files.length > 0或正则匹配 HTML 中的data:image/ - 别在 paste 里做异步处理后再插入——DOM 插入必须同步完成。如果要 fetch 或解析 CSV，得先
preventDefault()，再手动调用document.execCommand('insertText', false, processed)（兼容旧版）或用getSelection().getRangeAt(0).insertNode(...)（现代）
为什么 preventDefault() 有时像没起作用
常见假象：加了 preventDefault()，结果图片还是进来了，或者文字重复插入两次。
- 监听目标错了：比如在
.grid父容器上监听，但子元素是div[contenteditable]——此时event.target是那个 div，它本身有原生粘贴行为，你不该拦；真正该拦的是点击在纯div.cell上的 paste - 没判断
event.target类型：直接在父级无条件preventDefault()，会导致input和textarea也失灵。正确做法是先检查target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && !target.hasAttribute('contenteditable') - Chrome/Edge 可能触发两次 paste：一次带图片（
items有 image），一次带 HTML（含<img src="data:image/...">）。只拦第一轮，第二轮仍会插入 base64 图片。解决方案是在setTimeout(() => { ... }, 0)里扫描并移除新插入的<img>标签 -
onpaste属性写法不可靠：比如<div onpaste="handler(event)">，在 Shadow DOM 或某些框架下无法保证 <code>preventDefault()生效，一律用addEventListener父容器统一监听时如何精准分流
网格、表格类组件常需要整个容器响应 paste，但又不能破坏内部表单控件的原生行为。
- 关键不是“要不要拦”，而是“拦完之后要不要执行你的逻辑”——
preventDefault()是为了接管控制权，但是否执行自定义解析，取决于event.target是否真的需要它 - 推荐判断顺序：先排除
INPUT、TEXTAREA，再排除hasAttribute('contenteditable')（比检查contentEditable属性值更准，避免"inherit"干扰） - 即使目标是纯
div（无默认粘贴能力），也建议保留preventDefault()：显式表明“此事件已被处理”，防止未来扩展 contenteditable 子项时出现逻辑断裂 - 不要试图用 CSS（如
user-select: none）禁用粘贴——它对 paste 事件完全无效
最易被忽略的一点：事件处理函数开头必须立刻
preventDefault()，不能放在异步回调、Promise.then 或 setTimeout 里——等那会儿，浏览器默认行为早就执行完了。 - 关键不是“要不要拦”，而是“拦完之后要不要执行你的逻辑”——
