您如何在摩纳哥编辑器中处理来自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节点上获取输入事件的更普遍问题的简化表示。例如，您可以为addEventListener()调用mousemove。 click等上的domNode等，但即使您看到Chrome DevTools中存在处理程序，也永远不会调用它的处理程序。

请注意，VS Code本身具有IViewZone的非常丰富的实现，例如“显示参考”的“窥视”视图。该视图甚至支持滚动！因此，似乎可以获取这些输入事件，但是从文档中并不能立即看出。

[也许可以使用编辑器自己的onMouseDown()方法（如操场底部所示），然后委派给适当的目标，尽管这似乎不是VS Code所做的。

Answer 1

视图区域中的链接不可单击的原因是整个视图区域均显示在视图线（源代码）下，这意味着整个视图区域均不可单击。要渲染用户可以与之交互的元素，应使用contentWidget。

VS Code中的窥视视图是一个视图区域（在视图线之间创建空白）和其上方的内容小部件，您可以与之交互。它们放置在相同的位置，因此用户将看不到内容窗口小部件后面的视图区域。

在monaco playground中，将第52行更改为this.domNode.innerHTML = '<a target="_blank" href="https://www.microsoft.com/">Microsoft</a>';并再次运行示例，您可以单击链接，然后将打开一个新选项卡。