回到课程

键盘移动

重要程度: 4

聚焦在老鼠上。然后使用方向键去移动它:

在新窗口中演示

另外不要把事件处理器放在除了 #mouse 元素外的其它任何地方。 还有不要修改 HTML/CSS,这个方法应该是通用的,可以作用在任何元素上。

打开一个任务沙箱。

我们可以使用 mouse.onclick 来处理点击事件,并通过 position:fixed 让元素“可移动”,然后使用 mouse.onkeydown 去处理点击方向键事件。

唯一的缺陷是 keydown 仅会触发在聚焦的元素上。所以我们需要为这个元素添加 tabindex。因为我们不可以改变 HTML,所以我们可以使用 mouse.tabIndex 属性来达到这个目的。

另外我们也可以使用 mouse.onfocus 代替 mouse.onclick

使用沙箱打开解决方案。