Question

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

有人可以指出，我缺少什么？

Answer 1

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

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

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

Answer 2

布伦特的答案为您提供了理由和清洁解决方案，如果您无法停止使用embed标记，我会为您提供原始解决方法。

那就是在嵌入视口上方放置一个不可见的span或div元素，当人们点击嵌入内容时，他们将真正点击你的隐形元素，这样焦点就不会转移到embededd元素，所以你的{ {1}}处理程序将被解雇。

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

Answer 3

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

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

单击后不再触发Keydown事件

3 个答案: