您如何在 Monaco 編輯器中處理來自 IViewZone 的輸入事件？

Question

如果你試試這個摩納哥游樂場：

https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-listening-to-mouse-events

並將其添加到第 36 行以設置插入的淺綠色IViewZone的 HTML：

domNode.innerHTML = '<a href="https://www.microsoft.com/">Microsoft</a>';

您將看到該鏈接不可點擊。 這是無法在 DOM 節點上獲取輸入事件的更普遍問題的簡化再現。 例如，您可以為mousemove調用addEventListener() 。 在domNode上click等，但即使您可以看到它存在於 Chrome DevTools 中，您的處理程序也永遠不會被調用。

請注意，VS Code 本身具有非常豐富的IViewZone實現，例如 Show References 的“peek”視圖。 該視圖甚至支持滾動！ 因此，獲取這些輸入事件似乎是可能的，但從文檔中並不是很明顯。

可以使用編輯器自己的onMouseDown()方法（如操場底部所示），然后委托給適當的目標，盡管這似乎不是 VS Code 正在做的事情。

Answer 1

視圖區中的鏈接不可點擊的原因是整個視圖區都在視圖線（源代碼）下呈現，這意味着整個視圖區不可點擊。 要呈現用戶可以與之交互的元素，應使用contentWidget 。

VS Code 中的 peek 視圖是一個視圖區域（它在視圖行之間創建空白）和它上面的內容小部件，您可以與之交互。 它們被放置在相同的位置，因此用戶不會看到內容小部件后面的視圖區域。

在monaco playground 中，將第 52 行更改為this.domNode.innerHTML = '<a target="_blank" href="https://www.microsoft.com/">Microsoft</a>'; 並再次運行示例，您可以單擊該鏈接並打開一個新選項卡。