event.preventDefault无法阻止ChatGPT及Gmail输入框粘贴的技术问询

我用以下代码尝试阻止网页上的粘贴操作：

document.addEventListener('paste', (event) => {
    event.preventDefault();
});

这段代码在大多数场景下都能生效，但在ChatGPT的输入框里无法阻止粘贴，操作步骤如下：

• 在Windows系统的Chrome浏览器中打开chatgpt.com；
• 打开控制台并运行上述代码；
• 复制文本后，通过Ctrl+V或右键菜单粘贴到输入框；
• 文本依然能成功粘贴。

我想知道ChatGPT输入框的粘贴实现逻辑，以及有没有办法阻止这里的粘贴操作？

更新 #

感谢@Unmitigated的提示，将useCapture参数设为true后，ChatGPT的问题已经解决，修改后的代码如下：

document.addEventListener('paste', (event) => {
    event.preventDefault();
}, true);

但发现仍有部分网站即使设置useCapture为true也无法生效，比如Gmail，操作步骤如下：

• 在Windows系统的Chrome浏览器中打开gmail.com；
• 点击"撰写"创建新邮件；
• 打开控制台并运行上述修改后的代码；
• 复制文本后粘贴到邮件内容区域；
• 文本依然能成功粘贴。

问题解析与解决方案 #

ChatGPT输入框的粘贴逻辑与解决原因

浏览器的事件触发分为捕获阶段和冒泡阶段，默认情况下addEventListener是在冒泡阶段绑定事件。ChatGPT的输入框可能在捕获阶段就已经绑定了自己的粘贴处理逻辑，所以之前的代码在冒泡阶段阻止事件时，它的逻辑已经执行完毕。将useCapture设为true后，我们的事件会在捕获阶段优先触发，提前阻止事件传递，从而覆盖ChatGPT的粘贴处理。

Gmail无法阻止的原因及可能的解决方向

Gmail的邮件内容编辑器是富文本编辑器，它的粘贴实现更为复杂：

1. 编辑器可能直接通过Clipboard API读取剪贴板内容，不依赖原生paste事件触发；
2. 编辑器自身会在更底层的元素上绑定事件，并且可能调用event.stopPropagation()阻止事件向上传递，导致绑定在document上的事件无法捕获；
3. 部分富文本编辑器会使用自定义粘贴逻辑，即使原生paste事件被阻止，依然能通过其他方式完成粘贴。

针对Gmail的可能解决方案：

• 直接绑定到编辑器元素：先定位到Gmail邮件内容区域的DOM元素（比如通过document.querySelector找到对应的iframe或富文本容器），再给该元素绑定捕获阶段的paste事件：

  const editor = document.querySelector('div[aria-label="邮件内容"]');
  if (editor) {
      editor.addEventListener('paste', (e) => e.preventDefault(), true);
  }
  

• 阻止剪贴板读取：尝试监听clipboardread事件，阻止浏览器读取剪贴板内容（注意该API兼容性有限，部分浏览器可能限制使用）：

  document.addEventListener('clipboardread', (e) => e.preventDefault(), true);
  

• 禁用编辑器编辑功能：通过设置contenteditable="false"禁用编辑器的编辑权限，但这会同时禁止输入，仅适用于完全禁止内容修改的场景。

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