本文介绍一种可靠方法：通过检测当前文本选区（`window.getselection()`）和焦点元素（`document.activeelement`），精准判断是否应让浏览器执行原生剪贴板行为（如复制输入框内容、粘贴到编辑区域），仅在无干扰场景下启用自定义拖拽/布局项的剪贴板逻辑。
在构建支持拖拽排序与内联编辑的 React 应用时，全局注册 copy/paste 事件监听器虽方便，却极易破坏原生剪贴板体验——例如用户在 中复制文字、在富文本区域粘贴内容时，你的自定义逻辑仍会劫持事件并调用 event.preventDefault()，导致预期行为失效。
核心思路是：不依赖 DOM 目标节点（如 event.target）做粗粒度判断，而是主动探测当前上下文是否具备“可被原生处理”的剪贴板条件。这包括两类关键状态：
- 是否存在有效文本选区：用户已用鼠标或键盘选中了可见文本（非空、未折叠）；
- 是否存在可编辑焦点元素：当前 document.activeElement 是 、
以下是推荐的工具函数与事件监听器改造方案：
// 工具函数：检测是否有非空文本选区
const isPageTextSelected = (): boolean => {
const selection = window.getSelection();
return !!selection && !selection.isCollapsed;
};
// 工具函数：检测是否处于可编辑焦点状态
const isInputActive = (): boolean => {
const { activeElement } = document;
return (
activeElement instanceof HTMLInputElement ||
activeElement instanceof HTMLTextAreaElement ||
(activeElement?.isContentEditable === true)
);
};将上述判断注入你的事件监听器中：
// ✅ Copy 监听器：仅当无文本选中且无编辑焦点时才介入
document.addEventListener('copy', (event) => {
if (!selectedItem) return;
// ? 关键守卫：若用户正在操作文本或输入框，放行原生行为
if (isPageTextSelected() || isInputActive()) {
return; // 不调用 preventDefault()，浏览器按默认逻辑执行
}
event.clipboardData?.setData('text/plain', selectedItem.id);
event.clipboardData?.setData(
'application/x-my-app-item-json',
JSON.stringify(selectedItem)
);
event.preventDefault(); // 仅在此处阻止默认行为
});
// ✅ Paste 监听器：仅当焦点不在编辑区域时才尝试解析自定义数据
document.addEventListener('paste', (event) => {
// ? 关键守卫：若光标在输入框/编辑区，完全交由浏览器处理
if (isInputActive()) {
return;
}
const itemJson = event.clipboardData?.getData('application/x-my-app-item-json');
if (!itemJson) return;
try {
const item = JSON.parse(itemJson);
insertItem(item);
event.preventDefault();
} catch (e) {
// 忽略非法 JSON，不阻止默认粘贴（例如纯文本仍可粘贴）
}
});⚠️ 注意事项与最佳实践：
- 避免过度拦截：切勿在 copy/paste 中无条件调用 event.preventDefault()，它会彻底禁用所有原生能力（包括跨应用粘贴纯文本）；
- contenteditable 兼容性：务必检查 activeElement?.isContentEditable，而非仅依赖标签名，以支持自定义富文本组件；
- React 生命周期管理：在组件卸载时移除监听器（使用 useEffect 清理函数），防止内存泄漏；
- 无障碍友好：该方案天然兼容键盘选中文本（Shift+→）、屏幕阅读器聚焦等场景，无需额外适配；
- 扩展性提示：如需支持
此方案平衡了功能完整性与用户体验，使自定义剪贴板逻辑真正成为“兜底机制”——只有当页面无其他明确意图时才生效，从而实现专业级的剪贴板行为分层控制。
