60

キーボードとマウスの入力に応答するキャンバスアプリを作成しようとしています。私はこのコードを持っています：

canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', function(event) {
    alert('mousedown');
        }, false);
canvas.addEventListener('keydown', function(event) {
    alert('keydown');
        }, false);

「マウスダウン」アラートはマウスをクリックするたびに表示されますが、「キーダウン」アラートは表示されません。同じコードがJSBinで正常に機能します：http：//jsbin.com/uteha3/66/

なぜ私のページで機能しないのですか？キャンバスはキーボード入力を認識しませんか？

4

4 に答える 4

117

canvas要素のtabindexを1などに設定します

<canvas tabindex='1'></canvas>

要素をフォーカス可能にするのは古いトリックです

于 2012-10-14T22:35:02.720 に答える
62

編集-この答えは解決策ですが、はるかに簡単で適切なアプローチはtabindex、canvas要素に属性を設定することです（hobberwickeyによって提案されています）。

キャンバス要素にフォーカスすることはできません。これを回避する簡単な作業は、「自分の」焦点を作ることです。

var lastDownTarget, canvas;
window.onload = function() {
    canvas = document.getElementById('canvas');

    document.addEventListener('mousedown', function(event) {
        lastDownTarget = event.target;
        alert('mousedown');
    }, false);

    document.addEventListener('keydown', function(event) {
        if(lastDownTarget == canvas) {
            alert('keydown');
        }
    }, false);
}

JSFIDDLE

于 2012-10-14T21:00:28.847 に答える
0

すべてのjsコードをwindow.onload関数内にカプセル化します。同様の問題がありました。すべてがJavaScriptで非同期に読み込まれるため、ブラウザなど、一部の部分は他の部分よりも速く読み込まれます。すべてのコードをonload関数内に配置すると、実行を試みる前に、ブラウザーからコードに必要なすべてのものを使用できるようになります。

于 2019-09-10T19:47:38.033 に答える
0

キャンバスのtabindexを「1」（または「0」）に設定するだけで機能する場合があります。しかし、時々-奇妙な理由で、そうではありません。

私の場合（ReactJSアプリ、動的なキャンバスelの作成とマウント）、canvasEl.focus（）を呼び出して修正する必要があります。たぶんこれはどういうわけかReactに関連しています（KnockoutJSに基づく私の古いアプリは'..focus（）'なしで動作します）

于 2019-10-14T22:51:51.727 に答える