レッスンに戻る

キーボード駆動のねずみ

重要性: 4

ネズミにフォーカスを当ててください。その後矢印キーでそれを動かしてください:

新しいウィンドウでデモ

P.S. #mouse 要素を除き、どこにもイベントハンドラを置かないでください。 P.P.S. HTML/CSS を変更しないでください。このアプローチは汎用的でどの要素でも動作するべきです。

タスクのためのサンドボックスを開く

mouse.onclick を使用してクリックを処理し、ネズミを position:fixed で移動可能にし、その後 mouse.onkeydown で矢印キーを処理します。

唯一の落とし穴は keydown はフォーカスのある要素でのみトリガするということです。そのため、要素に tabindex を追加する必要があります。HTML を変更することは禁止しているので、そのために mouse.tabIndex プロパティを使います。

P.S. mouse.onclickmouse.onfocus に置き換えることもできます。

サンドボックスで解答を開く