如何在摩纳哥编辑器中防止粘贴事件的默认功能答案

【问题标题】：How to prevent default functionality of paste event in monaco editor如何在摩纳哥编辑器中防止粘贴事件的默认功能
【发布时间】：2022-01-07 17:55:21
【问题描述】：

如何防止 monaco 编辑器的粘贴事件的默认功能（当从浏览器菜单选项 Edit->Paste 触发时）？我正在通过以下方式处理粘贴事件：

    editor.getContainerDomNode().addEventListener('paste', (event) => {
        event.preventDefault();
        event.stopPropagation();
    }

我还尝试处理 textarea 上的粘贴事件，这是事件传播中的源元素。

    let textarea = editor.getContainerDomNode().querySelectorAll("textarea.inputarea.monaco-mouse-cursor-text")[0];
    textarea.addEventListener('paste', (event) => {
        event.preventDefault();
        event.stopPropagation();
    });

但这里似乎preventDefault 也不起作用。无论复制什么文本，它都会粘贴到编辑器中。

基本上，我想在从浏览器编辑菜单触发时禁用粘贴操作。需要知道如何在 monaco-editor 中实现这一点。我在这里做错了什么还是摩纳哥编辑器的错误？

【问题讨论】：

标签： javascript paste monaco-editor

【解决方案1】：

您的问题来自监听器处理事件的方式，当它们设置在不同的祖先元素上时。
事件通常在目标元素上处理，然后在其祖先元素上“冒泡”。
在您的情况下，您正在编辑器的父元素上添加一个侦听器。这意味着您的侦听器将在实际目标上的任何侦听器之后执行（这实际上是 monaco 处理粘贴事件的方式）。
因此，您正试图阻止已经执行的操作。

幸运的是，有一种方法可以实现您想要的！这就是所谓的“捕获”。
通过在对addEventListener 的调用中指定您希望在在其下降过程中 捕获事件。这可以通过添加第三个参数{capture: true} 或简单地true 来完成：

editor.getDomNode().addEventListener('paste', (event) => {
    event.stopPropagation();
    event.preventDefault();
}, true);

这应该会阻止编辑器实际执行操作。
见Documentation on bubbling and capturing events。

【讨论】：