Javascript 如何在编辑器中处理IViewZone中的输入事件？

如果你在摩纳哥的游乐场尝试：

并将其添加到第36行，以设置插入的浅绿色

IViewZone

的HTML：

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

domNode.innerHTML=''；

您将看到该链接不可单击。这是一个更一般的问题的简化再现，即无法在DOM节点上获取输入事件。例如，您可以为

mousemove

调用

addEventListener（）

<代码>在

domNode

上单击，等等，但是您的处理程序将永远不会被调用，即使您可以在Chrome开发工具中看到它

请注意，VS代码本身具有非常丰富的IViewZone实现，例如用于显示引用的“peek”视图。该视图甚至支持滚动！因此，获取这些输入事件似乎是可能的，但从文档中并不是很明显

---

可以使用编辑器自己的

onMouseDown（）

方法（如操场底部所示），然后委托给相应的目标，尽管VS code似乎并不是这样做的。

视图区域中的链接不可单击的原因是整个视图区域都呈现在视图线下（源代码），这意味着整个视图区域不可单击。要呈现用户可以交互的元素，应使用

contentWidget

VS代码中的peek视图是一个视图区域（在视图行之间创建空白）和它上面的一个内容小部件，可以与之交互。它们放在同一位置，这样用户就不会看到内容小部件后面的视图区域

---

在中，将第52行更改为

this.domNode.innerHTML=''；

并再次运行该示例，您可以单击该链接并打开一个新选项卡。

视图区域中的链接不可单击的原因是整个视图区域在视图行下呈现（源代码），这意味着整个视图区域不可单击。要呈现用户可以交互的元素，应使用

contentWidget

VS代码中的peek视图是一个视图区域（在视图行之间创建空白）和它上面的一个内容小部件，可以与之交互。它们放在同一位置，这样用户就不会看到内容小部件后面的视图区域

---

在中，将第52行更改为

this.domNode.innerHTML=''；

并再次运行该示例，您可以单击该链接并打开一个新选项卡。

与VS代码之间一个有趣的区别是VS代码似乎指定了

style=“z-index:10”

在每个

摩纳哥查看区域

上，而游乐场没有。因此，似乎我必须在VS code中的每个

摩纳哥可见内容小部件

上添加

z-index:11

，以获取输入事件，否则它们会被

IViewZone

吞没。啊，这似乎发生在这里：提高z-index只有他一个人特定事件的lps。鼠标滚轮和触摸板事件仍然不起作用。摩纳哥游乐场和VS代码之间一个有趣的区别是VS代码似乎指定了style=“z-index:10”在每个

摩纳哥查看区域

上，而游乐场没有。因此，似乎我必须在VS code中的每个

摩纳哥可见内容小部件

上添加

z-index:11

，以获取输入事件，否则它们会被

IViewZone

吞没。啊，这似乎发生在这里：提高z-index只有他一个人某些事件的lps。鼠标滚轮和触摸板事件仍然不起作用。