如何在父元素仅对无默认粘贴动作的目标触发自定义paste事件？

问题 #

我有一个包含文本输入框的HTML表格（grid），想要实现自定义粘贴功能（例如粘贴整行），要求仅当用户向无默认粘贴功能的元素（如普通div单元格）粘贴时触发自定义逻辑，而在向input、textarea这类自带默认粘贴功能的元素粘贴时不触发。

现有代码会在整个grid范围内触发粘贴提示，但我只想在Cell A这类单元格粘贴时弹出提示，Cell B里的输入框粘贴时不触发。请问如何判断事件目标是否具备默认粘贴动作？

解决方案 #

要实现这个需求，核心是区分触发粘贴事件的元素是否为原生自带粘贴功能的可编辑表单控件，具体实现如下：

1. 编写判断函数 #

创建工具函数来识别自带默认粘贴功能的元素：

const hasDefaultPasteBehavior = (el) => {
  if (el.tagName === 'INPUT') {
    // 仅匹配可编辑类型的input
    const editableInputTypes = ['text', 'password', 'email', 'number', 'tel', 'url', 'search'];
    return editableInputTypes.includes(el.type.toLowerCase());
  }
  // 匹配textarea
  return el.tagName === 'TEXTAREA';
};

2. 事件监听逻辑 #

在粘贴事件中，先处理事件目标可能为文本节点的情况，再判断是否执行自定义粘贴：

const grid = document.querySelector(".grid");

grid.addEventListener("paste", (event) => {
  // 处理目标为文本节点的情况，获取其父元素
  const targetElement = event.target.nodeType === Node.TEXT_NODE 
    ? event.target.parentElement 
    : event.target;

  // 仅当目标无默认粘贴功能时，触发自定义逻辑
  if (!hasDefaultPasteBehavior(targetElement)) {
    alert('Grid custom paste');
    // 若需要阻止contenteditable元素的默认粘贴行为，取消注释此行
    // event.preventDefault();
  }
});

完整代码示例 #

HTML #

<div class="grid" contenteditable="true">
   <div class="row" tabindex="1">
     <div class="cell" tabindex="1">Cell A</div>
     <div class="cell" tabindex="1"><input value="CellB"/></div>
   </div>
</div>

JavaScript #

const grid = document.querySelector(".grid");

const hasDefaultPasteBehavior = (el) => {
  if (el.tagName === 'INPUT') {
    const editableInputTypes = ['text', 'password', 'email', 'number', 'tel', 'url', 'search'];
    return editableInputTypes.includes(el.type.toLowerCase());
  }
  return el.tagName === 'TEXTAREA';
};

grid.addEventListener("paste", (event) => {
  const targetElement = event.target.nodeType === Node.TEXT_NODE 
    ? event.target.parentElement 
    : event.target;

  if (!hasDefaultPasteBehavior(targetElement)) {
    alert('Grid custom paste');
    // event.preventDefault();
  }
});

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