使用 SVG 文档拦截 html 中的键盘事件的正确方法是什么？答案

【问题标题】：What's the correct way to intercept keyboard events in html with an SVG document?使用 SVG 文档拦截 html 中的键盘事件的正确方法是什么？
【发布时间】：2016-06-11 19:08:42
【问题描述】：

我有一个 html 文档，其与此问题相关的部分如下：

<body onload='main()'>

<object id='svg' type="image/svg+xml" data="b.svg"></object>

</body>

函数 main (onload = ..) 用于为 keydown 事件安装事件处理程序：

function main() {

  document.addEventListener('keydown', 
       function(ev) { 
         console.log('DOC keydown, ev.keyCode = ' + ev.keyCode); 
        },
       false);
}

这按预期工作直到我点击进入b.svg 占据的区域。之后，键盘事件似乎以某种方式通过/在 SVG 文档中进行处理，并且它们没有到达 document 对象的事件处理程序。

我现在可以在 SVG 元素本身上添加 另一个 事件监听器：

  var svg=document.getElementById('svg');
  var svgDoc = svg.contentDocument;

  svgDoc.addEventListener('keydown', 
       function(ev) { 
         console.log('SVG keydown, ev.keyCode = ' + ev.keyCode); 
        },
       false);

这再次按预期工作。

然而，我觉得这有点笨拙和不雅。如果可能，我希望只有一个事件监听器。

那么，这是在带有 SVG 绘图的 html 页面中处理键盘事件的正确方法，还是有更好的选择？

【问题讨论】：

你能创建一个jsfiddle来演示吗？

标签： javascript html svg dom-events

【解决方案1】：

如果您不希望 svg 处理事件，请将 pointer-events="none" 添加到其根元素。

【讨论】：