DIVで表される長方形をクリックし、キーボードを使用してキーボードイベントを一覧表示することにより、そのDIVを移動できるようにするアプリケーションを構築しています。
ドキュメントレベルでこれらのキーボードイベントにイベントリスナーを使用するのではなく、おそらくキーボードフォーカスを与えることによって、DIVレベルでキーボードイベントをリッスンできますか？
問題を説明するための簡略化されたサンプルを次に示します。
<html>
<head>
</head>
<body>
<div id="outer" style="background-color:#eeeeee;padding:10px">
outer
<div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;">
want to be able to focus this element and pick up keypresses
</div>
</div>
<script language="Javascript">
function onClick()
{
document.getElementById('inner').innerHTML="clicked";
document.getElementById('inner').focus();
}
//this handler is never called
function onKeypressDiv()
{
document.getElementById('inner').innerHTML="keypress on div";
}
function onKeypressDoc()
{
document.getElementById('inner').innerHTML="keypress on doc";
}
//install event handlers
document.getElementById('inner').addEventListener("click", onClick, false);
document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false);
document.addEventListener("keypress", onKeypressDoc, false);
</script>
</body>
</html>
内側のDIVをクリックすると、フォーカスを合わせようとしますが、後続のキーボードイベントは、DIVレベルのイベントリスナーではなく、常にドキュメントレベルで取得されます。
キーボードフォーカスのアプリケーション固有の概念を実装する必要があるだけですか？
Firefoxで動作するためにこれだけが必要だと付け加えるべきです。