单击后不再触发Keydown事件

Question

I have a website were I'd like to react upon arrow key events. 我有一个网站，我想对箭头键事件做出反应。 I added a keydown listener, which works as long as I don't click in the site. 我添加了一个keydown侦听器，只要我不单击该站点，该侦听器就可以工作。 After clicking, the keydown no longer gets triggered. 单击后，不再触发keydown 。

Since the behavior is the same for Chrome and Firefox I suspect I am missing something. 由于Chrome和Firefox的行为相同，我怀疑我缺少了一些东西。

Following the sourcecode: 遵循源代码：

<!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>

Could someone point out, what I am missing? 有人可以指出，我想念的是什么？

Answer 1

The problem is that you're using an embed element for the entire viewport. 问题是您在整个视口中使用了embed元素。 Embed elements are for embedding multimedia into your site. 嵌入元素用于将多媒体嵌入到您的站点中。 Once the focus is moved to that element (by clicking), it hijacks your events. 一旦焦点移到该元素上（通过单击），它就会劫持您的事件。

You can see this in action here: http://jsfiddle.net/blineberry/p6rXP/ Click in the results window but not on the image and press a key. 您可以在这里看到实际的效果： http : //jsfiddle.net/blineberry/p6rXP/在结果窗口中单击，但不在图像上单击，然后按一个键。 Then click on the image and press a key. 然后单击图像并按一个键。 Then click off the image and press a key. 然后单击图像，然后按一个键。

If you use an img element instead of an embed the problem is resolved: http://jsfiddle.net/blineberry/p6rXP/1/ 如果您使用img元素而不是embed元素，则可以解决此问题： http : //jsfiddle.net/blineberry/p6rXP/1/

Answer 2

Brent's answer gave you the rationale for this and the clean solution, I will give you the crude workaround in case you can't stop using an embed tag. 布伦特的答案为您提供了这一基本原理和干净的解决方案，如果您无法停止使用embed标签，我将为您提供粗略的解决方法。

That is to place an invisible span or div element above your embed viewport, that way when people click over the embed content they will be really clicking on your invisible element so the focus is not transfered to the embededd element and so your window.keydown handler will be fired. 那就是在嵌入的视口上方放置一个不可见的span或div元素，这样，当人们单击嵌入的内容时，他们将真正单击您的不可见的元素，因此焦点不会转移到embeddd元素上，因此您的window.keydown处理程序将被解雇。

See https://stackoverflow.com/a/9614949/352672 for an example code for this workaround. 有关此替代方法的示例代码，请参见https://stackoverflow.com/a/9614949/352672 。

Answer 3

What I ended up doing was loading the external SVG into the document body. 我最终要做的是将外部SVG加载到文档主体中。 The whole problem goes away then (while others surface). 这样，整个问题就消失了（而其他问题浮出水面）。 With jquery this would look like so: 使用jquery时，它看起来像这样：

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

单击后不再触发Keydown事件

问题描述

3 个解决方案

解决方案1
3 2012-11-13 18:39:56

解决方案2
1 2012-11-13 18:53:59

解决方案3
0 2012-11-17 13:52:43

单击后不再触发Keydown事件

问题描述

3 个解决方案

解决方案1 3 2012-11-13 18:39:56

解决方案2 1 2012-11-13 18:53:59

解决方案3 0 2012-11-17 13:52:43

解决方案1
3 2012-11-13 18:39:56

解决方案2
1 2012-11-13 18:53:59

解决方案3
0 2012-11-17 13:52:43