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ブレントの答えは、これとクリーンなソリューションの理論的根拠を示しました。タグの使用をやめられない場合に備えて、大雑把な回避策を示します。

これは、埋め込みビューポートの上に非表示のスパンまたは div 要素を配置することです。これにより、人々が埋め込みコンテンツをクリックすると、非表示の要素が実際にクリックされるため、フォーカスがembededd要素に転送されず、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 に答える