Javascript 单击SVG元素可停止触发关键事件

我正在用PIXI做一个游戏，用Mithril做一些UI元素。我为各种输入创建事件侦听器（WASD用于移动，鼠标单击用于操作）。我将SVG呈现为UI的一部分（带有标记），当我单击该SVG时，浏览器中必须有一些“重新聚焦”，因为关键输入停止触发事件。特别是，我甚至不能使用用来打开/关闭SVG的键

---

我不能简单地关闭与元素的交互，因为我需要能够将事件侦听器附加到SVG中的某些元素。如何纠正这种“重新聚焦”行为？奇怪的是，我也无法在单击svg时触发onclick（在将onclick函数传递给元素之后）。

加载到元素中的svg就像加载到中一样，有自己的文档，该文档从所有者文档中沙盒化

在一个上下文中发生的事件对另一个上下文不可见。这是有意的，你不会希望页面上的随机广告能够阅读嵌入程序中输入的所有内容，同样的，你也不会希望页面上的随机广告能够阅读嵌入程序中输入的所有内容

因此，这里简单的解决方案是将SVG作为内联元素直接添加到主文档中：

onkeydown=（evt）=>{
evt.preventDefault（）；
console.log（“按下”，evt.key）；
}

按任意键或单击矩形

文档查询选择器（“rect”）
.addEventListener（“单击”，（evt）=>
evt.target.setAttribute（“fill”、“#”+（（Math.random（）*0xFFFFF）|0））
);

因为我使用Mithril来管理UI状态，所以我不想在主文档中内联太多内容。感谢您的回答，我通过在svg元素上的单击事件侦听器中调用document.body.focus（）部分解决了我的问题，这会导致单击时焦点立即翻转，但是我必须为每个更改焦点的事件注册类似的处理程序。你知道是否有可能在第一时间阻止焦点改变，但仍然允许处理点击等？我想没有，在这种情况下，您知道一种更简单的方法来实现我所描述的吗？您是否绝对需要svg上的click事件位于元素的填充部分或svg中的任何位置都可以？如果是后者，则使用渲染svg。我之所以使用svg，是因为我希望能够将不同的侦听器连接到图像的不同部分。您仍然拥有该元素，否则，我想我在回答中给出了我所能想到的一切。