点击后不再触发Keydown事件

我有一个网站，我想对箭头键事件做出反应。我添加了一个监听器，只要我不点击该站点，监听器就会工作。点击后，不再被触发。点击后不再触发Keydown事件

由于行为是相同的Chrome和Firefox我怀疑我失去了一些东西。

继源代码：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      html, body, embed 
      { 
       position: absolute; 
       width: 100%; 
       height: 100%; 
       margin: 0px; 
       padding: 0px; 
       border: 0px; 
      } 
     </style> 
     <script>  
      var keyHandler = function(event) { 
       alert("EV" + event); 
      }; 
      window.addEventListener('keydown', keyHandler, true); 
     </script> 
    </head> 
    <body> 
     <embed src="http://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg"/> 
    </body> 
</html>

可能有人指出，有什么我失踪？

来源

2012-11-13 abergmeier

你试过document.addEventListener？（未经测试） –

'document.addEventListener'具有完全相同的行为。 – abergmeier

你有jQuery吗？或愿意使用它？有一个可以接受的解决方案，使用这个 –

问题是，您正在使用整个视口的embed元素。嵌入元素用于将多媒体嵌入到您的网站中。一旦焦点移动到该元素（通过点击），它就会劫持你的事件。

你可以在这里看到这个动作：http://jsfiddle.net/blineberry/p6rXP/点击结果窗口，但不是在图像上，然后按下一个键。然后点击图像并按下一个键。然后点击图像并按下一个键。

如果使用img元素，而不是一个embed的问题得到解决：http://jsfiddle.net/blineberry/p6rXP/1/

来源

2012-11-13 18:39:56 Brent

然后，我还可以添加eventHandlers到svg中的元素吗？ – abergmeier

布伦特的答案给你这样做的理由和干净的解决方案，我会给你的情况下，原油替代方法无法停止使用embed标签。

这就是在嵌入视口上方放置一个不可见的跨度或div元素，这样当用户点击嵌入内容时，他们将真正点击隐藏元素，这样焦点就不会转移到embededd元素，所以您的window.keydown处理程序将被解雇。

有关此解决方法的示例代码，请参阅https://stackoverflow.com/a/9614949/352672。

来源

2012-11-13 18:53:59 Nelson

因为我想添加事件处理程序来点击SVG，所以这不是一个真正的选项： – abergmeier

我最终做的是将外部SVG加载到文档主体中。然后整个问题消失（而其他的表面）。随着的jQuery这看起来像这样：

<body> 
    <script> 
     $(document.body).load("mygreat.svg"); 
    </script> 
</body>

来源

2012-11-17 13:52:43 abergmeier

点击后不再触发Keydown事件

回答

相关问题