Javascript 什么'；使用SVG文档拦截html中键盘事件的正确方法是什么？_Javascript_Html_Svg_Dom Events

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

javascript html svg

Javascript 什么'；使用SVG文档拦截html中键盘事件的正确方法是什么？,javascript,html,svg,dom-events,Javascript,Html,Svg,Dom Events,我有一份html文档，其与此问题相关的部分如下： <body onload='main()'> <object id='svg' type="image/svg+xml" data="b.svg"></object> </body> 在我点击b.svg所占据的区域之前，它一直按预期工作。之后，键盘事件似乎以某种方式通过SVG文档/在SVG文档中进行处理，而不会进入文档对象的事件处理程序现在，我可以在SVG元素本身上添加另一个事件侦听器：

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

<body onload='main()'>

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

</body>

在我点击

b.svg

所占据的区域之前，它一直按预期工作。之后，键盘事件似乎以某种方式通过SVG文档/在SVG文档中进行处理，而不会进入

文档

对象的事件处理程序

现在，我可以在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页面中的键盘事件的正确方法，还是有更好的替代方法？

如果您不希望SVG处理事件，请在其根元素中添加pointer events=“none”。

您能创建一个JSFIDLE来演示吗？

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

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