如何在摩纳哥编辑器中处理来自IViewZone的输入事件?

时间:2019-11-28 04:06:17

标签: javascript visual-studio-code dom-events monaco-editor

如果您尝试在摩纳哥的这个游乐场:

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()的{​​{1}}。 mousemove上的click等,但是即使您看到Chrome DevTools中存在处理程序,也不会调用您的处理程序。

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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