React应用中如何限制剪贴板事件仅在无默认行为时触发？

问题场景 #

在React应用中，页面包含可拖拽排序的div，同时存在input、textarea等可编辑元素以及可选中的文本内容。需要实现自定义剪贴板逻辑：仅在用户没有执行默认剪贴板操作（如复制输入框内容、选中文本复制）时，才触发自定义的页面布局数据复制/粘贴；但当前全局监听的copy/paste事件会覆盖所有默认行为，导致输入框和文本复制粘贴异常。

解决方案 #

通过在事件监听中先判断是否需要触发默认行为，再决定是否执行自定义逻辑，具体修改如下：

1. 提取可编辑元素判断工具函数 #

封装复用函数，用于判断当前元素是否为可编辑元素：

function isEditableElement(element) {
  return element?.tagName === 'INPUT' || 
         element?.tagName === 'TEXTAREA' || 
         (element?.isContentEditable && element.isContentEditable);
}

2. 修改copy事件监听 #

执行自定义复制逻辑前，先排除两种需要默认行为的场景：

• 当前有可编辑元素处于聚焦状态（用户要复制输入框/文本框内容）
• 当前页面存在选中的文本内容（用户要复制页面文本）

修改后的代码：

document.addEventListener('copy', (event) => {
  const activeElement = document.activeElement;
  
  // 若当前聚焦可编辑元素，直接使用默认复制行为
  if (isEditableElement(activeElement)) {
    return;
  }

  // 若存在选中的文本内容，直接使用默认复制行为
  const selectedText = window.getSelection().toString().trim();
  if (selectedText) {
    return;
  }

  // 无默认行为时，执行自定义复制逻辑
  if (!selectedItem) {
    return;
  }

  event.clipboardData?.setData('text/plain', selectedItem.id);
  event.clipboardData?.setData(
    'application/x-my-app-item-json',
    JSON.stringify(selectedItem),
  );

  event.preventDefault();
});

3. 修改paste事件监听 #

当用户在可编辑元素中粘贴时，直接使用默认行为，不触发自定义的页面元素插入逻辑：

document.addEventListener('paste', (event) => {
  const activeElement = document.activeElement;
  
  // 若当前聚焦可编辑元素，直接使用默认粘贴行为
  if (isEditableElement(activeElement)) {
    return;
  }

  // 无默认行为时，执行自定义粘贴逻辑
  const itemJson = event.clipboardData?.getData(
    'application/x-my-app-item-json'
  );
  if (!itemJson) {
    return;
  }

  let item;
  try {
    item = JSON.parse(itemJson);
  } catch {
    return;
  }

  insertItem(item);
  event.preventDefault();
});

逻辑说明 #

• copy事件：优先保证用户对可编辑内容和选中文本的正常复制需求，只有当没有这些操作时，才触发自定义的页面元素数据复制。
• paste事件：只要用户在可编辑元素中操作，就完全使用浏览器默认粘贴行为，避免自定义逻辑干扰输入框的正常编辑。

内容的提问来源于stack exchange，提问作者SCB