Question

我有一个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页面中处理键盘事件的正确方法，还是有更好的选择？

Answer 1

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

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

1 个答案: