Ich erstelle eine Anwendung, in der ich auf ein Rechteck klicken möchte, das von einem DIV dargestellt wird, und dann die Tastatur verwenden kann, um diesen DIV durch Auflisten von Tastaturereignissen zu verschieben.
Kann ich Tastaturereignisse auf DIV-Ebene abhören, anstatt einen Ereignis-Listener für diese Tastaturereignisse auf Dokumentebene zu verwenden, indem ich ihm möglicherweise den Tastaturfokus gebe?
Hier ist ein vereinfachtes Beispiel, um das Problem zu veranschaulichen:
<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>Beim Klicken auf das innere DIV versuche ich, es zu fokussieren, aber nachfolgende Tastaturereignisse werden immer auf Dokumentebene erfasst, nicht auf meinem Ereignis-Listener auf DIV-Ebene.
Muss ich einfach einen anwendungsspezifischen Begriff des Tastaturfokus implementieren?
Ich sollte hinzufügen, dass ich dies nur brauche, um in Firefox zu arbeiten.