0

我有一个网站，我想对箭头键事件做出反应。我添加了一个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>

有人可以指出，我错过了什么？

4

3 回答 3

3

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

您可以在此处看到此操作：http: //jsfiddle.net/blineberry/p6rXP/单击结果窗口但不在图像上，然后按一个键。然后单击图像并按一个键。然后单击图像并按一个键。

如果您使用img元素而不是embed问题解决：http: //jsfiddle.net/blineberry/p6rXP/1/

于 2012-11-13T18:39:56.790 回答
1

布伦特的回答为您提供了这样做的理由和干净的解决方案，如果您无法停止使用embed标签，我将为您提供粗略的解决方法。

那就是在您的嵌入视口上方放置一个不可见的 span 或 div 元素，这样当人们点击嵌入内容时，他们将真正点击您的不可见元素，因此焦点不会转移到嵌入元素，因此您的window.keydown处理程序将被触发.

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

于 2012-11-13T18:53:59.057 回答
0

我最终做的是将外部 SVG 加载到文档正文中。然后整个问题就消失了（而其他问题浮出水面）。使用jquery，这看起来像这样：

<body>
    <script>
        $(document.body).load("mygreat.svg");
    </script>
</body>
于 2012-11-17T13:52:43.753 回答