如何在摩納哥編輯器中防止粘貼事件的默認功能

Question

如何防止摩納哥編輯器的粘貼事件的默認功能（當從瀏覽器菜單選項編輯->粘貼觸發時）？ 我正在通過以下方式處理粘貼事件：

    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 中實現這一點。 我在這里做錯了什么還是摩納哥編輯器的錯誤？

Answer 1

您的問題來自偵聽器處理事件的方式，當它們設置在不同的祖先元素上時。
事件通常在目標元素上處理，然后在其祖先元素上“冒泡”。
在您的情況下，您正在編輯器的父元素上添加一個偵聽器。 這意味着您的偵聽器將在實際目標上的任何偵聽器之后執行（這實際上是 monaco 處理粘貼事件的方式）。
因此，您正試圖阻止已經執行的操作。

幸運的是，有一種方法可以實現您想要的。 它被稱為“捕獲”。
通過在對addEventListener的調用中指定您希望在事件發生時捕獲事件。 這可以通過添加第三個參數{capture: true}或簡單地true來完成：

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

這應該會阻止編輯器實際執行該操作。
請參閱有關冒泡和捕獲事件的文檔。

另外，請注意event.stopPropagation()很重要。 請參閱event.stopPropagation 和 event.preventDefault 有什么區別？ .