我正在构建一个应用程序,希望能够单击一个由DIV表示的矩形,然后使用键盘通过列出键盘事件来移动该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级别事件监听器上拾取的。
我只需要实现特定于应用程序的键盘焦点概念吗?
我应该补充一下,我只需要这个就可以在火狐中使用。
