文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本文基于 Modern JavaScript Tutorial 仓库中 Focusing: focus/blur 章节的进阶练习「Keyboard-driven mouse」完整拆解一个经典实战场景不修改 HTML/CSS、只允许在#mouse元素上挂接事件的前提下让用户点击元素获得焦点后用方向键ArrowLeft/ArrowUp/ArrowRight/ArrowDown驱动该元素在页面中移动。这一练习集中考验三个核心知识点tabindex让任意元素可聚焦、focus与keydown的触发关系、以及position:fixed配合getBoundingClientRect()的定位技巧。读完本文你将掌握一套「把任意 DOM 元素变成可键盘操控控件」的通用方案。任务背景与约束题目原始描述位于 task.md先聚焦到鼠标上然后使用方向键移动它。并附带两条硬性约束不要在任何除#mouse元素以外的位置挂接事件处理器不要修改 HTML/CSS方案应当是通用的能作用于任何元素。起始 HTML 骨架见 source.view/index.html页面中只有一个pre idmouse构成的 ASCII 老鼠图形以及一段空的script占位。注意骨架中并没有给#mouse添加任何tabindex属性这正是需要靠 JavaScript 解决的第一个难点。解题思路概览官方答案solution.md给出的核心思路只有三步用mouse.onclick处理点击并通过position:fixed让元素变得“可移动”用mouse.onkeydown处理方向键唯一的陷阱是keydown只在拥有焦点的元素上触发因此必须给元素加上tabindex由于不允许修改 HTML改用mouse.tabIndex属性在 JavaScript 中完成。P.S. 官方还提示mouse.onclick也可以替换为mouse.onfocus。下面结合仓库中的完整实现逐段深入。第一步用 tabIndex 让任意元素可聚焦在 article.md 的「Allow focusing on any element: tabindex」一节中明确说明默认情况下只有用户可交互的元素button、input、select、a等支持focus/blur而div、span、pre、table这类格式化元素默认不可聚焦elem.focus()对其无效focus/blur事件也永远不会触发通过tabindex属性可以让任意元素变得可聚焦其值还决定了Tab键切换焦点的顺序。本题中的#mouse是一个pre元素天然不可聚焦。由于任务禁止修改 HTMLtabindex无法写入标签此时可以用tabIndex属性大小写需注意属性名在 DOM 中对应elem.tabIndex在运行时补齐。完整实现的第一行正是mouse.tabIndex 0;tabindex0的特殊语义是让元素可聚焦同时保持默认的切换顺序——即排在所有tabindex ≥ 1的元素之后、与普通input等无tabindex元素同组。这正是“让元素可聚焦但不改变 Tab 顺序”的典型用法。另外tabindex-1只允许通过elem.focus()编程式聚焦、Tab键会跳过它本题若想避免元素进入 Tab 序列也可以考虑但官方实现选择了更常规的0。从效果上看tabIndex 0使该pre不仅支持聚焦还自动获得:focus伪类样式的支持——骨架 CSS 中已有的#mouse:focus { outline: 1px dashed black; }会因此生效用户点击后能看到一个虚线焦点框给出清晰的“已聚焦、可操作”视觉反馈见 solution.view/index.html 第 13-15 行。第二步click 时切换到 fixed 定位并锚定当前位置要使元素能被方向键移动必须先让它脱离文档流。官方实现用onclick完成这件事mouse.onclick function() { this.style.left this.getBoundingClientRect().left px; this.style.top this.getBoundingClientRect().top px; this.style.position fixed; };逐行拆解getBoundingClientRect()返回元素相对视口的包围盒left/top即元素当前在页面中的精确坐标。先把这两个值写入style.left/style.top保证接下来切换定位方式时元素不会“跳走”this.style.position fixed将元素从普通文档流中取出改为相对视口固定定位。此后它的位置完全由left/top控制且不受页面滚动影响方向键移动的坐标计算因此变得简单可控之所以把getBoundingClientRect()的调用放在设置position: fixed之前是因为元素一旦脱离文档流其坐标基准和计算结果都会变化先取原始坐标再切换定位才能保证视觉位置无缝衔接。官方在 P.S. 中提示可用mouse.onfocus替代mouse.onclick因为tabindex已让元素可聚焦focus事件在用户点击时同样会触发。用onfocus的好处是任何获得焦点的途径点击、Tab键、elem.focus()都会初始化定位逻辑行为更统一。第三步onkeydown 处理四个方向键聚焦完成后#mouse会收到键盘事件。官方实现用switch按e.key分发四个方向mouse.onkeydown function(e) { switch (e.key) { case ArrowLeft: this.style.left parseInt(this.style.left) - this.offsetWidth px; return false; case ArrowUp: this.style.top parseInt(this.style.top) - this.offsetHeight px; return false; case ArrowRight: this.style.left parseInt(this.style.left) this.offsetWidth px; return false; case ArrowDown: this.style.top parseInt(this.style.top) this.offsetHeight px; return false; } };关键技术点为什么用event.key而不是event.code如 Keyboard: keydown and keyup 所述方向键这类无字符键的event.key与event.code值基本一致ArrowLeft等此处二者皆可而e.key语义更贴近“用户按下的键”且官方实现正是用它移动单位取offsetWidth/offsetHeight每次按键让元素移动一个自身宽度/高度相当于“按格移动”配合 ASCII 老鼠图形的固有尺寸移动节奏稳定且与元素自身大小解耦——这正是方案“通用化”的体现换成任意尺寸的元素同样成立parseInt(this.style.left)style.left是形如123px的字符串parseInt将其解析为数字参与加减运算之后重新拼接px单位写回return false的作用在通过 DOM 属性onkeydown ...方式赋值的处理器中返回false等价于调用event.preventDefault()用来阻止浏览器的默认行为——这里是防止方向键滚动页面。keydown的默认动作中本就包含“方向键滚动文档”不阻止的话元素在移动的同时页面也会跟着滚动交互体验会完全错乱。完整可运行实现将以上三步合并就是 solution.view/index.html 中#mouse元素的完整逻辑pre idmouse _ _ (q\_/p) /. .\ \_t_/ __ / \ ( (( )) ) /\) (/\ / \ Y /- nn^nn /pre script mouse.tabIndex 0; mouse.onclick function() { this.style.left this.getBoundingClientRect().left px; this.style.top this.getBoundingClientRect().top px; this.style.position fixed; }; mouse.onkeydown function(e) { switch (e.key) { case ArrowLeft: this.style.left parseInt(this.style.left) - this.offsetWidth px; return false; case ArrowUp: this.style.top parseInt(this.style.top) - this.offsetHeight px; return false; case ArrowRight: this.style.left parseInt(this.style.left) this.offsetWidth px; return false; case ArrowDown: this.style.top parseInt(this.style.top) this.offsetHeight px; return false; } }; /script运行流程点击老鼠 → 元素获得焦点出现虚线框并切换为fixed定位 → 按方向键每次移动一格。整个方案只操作了#mouse一个元素完全满足任务的两条约束且逻辑与元素具体内容无关可原样套用到img、div、按钮等任意元素上。方案背后的原理支撑focus 与键盘事件为什么必须加tabindex根源在于keydown的触发机制键盘事件只派发给当前拥有焦点的元素而浏览器默认只会把焦点交给可聚焦元素。如果#mouse不可聚焦点击它后焦点依然停留在document.body或之前聚焦的元素上此时按方向键事件会落在别处mouse.onkeydown永远不会触发。这一点在本仓库其他章节也有印证焦点相关章节 article.md 总结了focus/blur的两大特性——“绝大多数元素默认不支持聚焦用tabindex可以让任何元素可聚焦”并可通过document.activeElement随时读取当前聚焦元素。键盘章节 article.md 则指出keydown在按键按下时触发长按会 auto-repeatkeyup在松开时触发对于本题的方向键keydown天然支持长按连续移动无需额外处理repeat标志。另外值得注意focus/blur事件不会冒泡所以在#mouse上直接挂onclick/onfocus是安全的不会因为事件冒泡而干扰页面其他区域的处理器——这也解释了任务为何要求“只在#mouse元素上挂事件”。扩展思路在官方方案之上可以沿两条线继续深化改用focusin或捕获阶段监听若想把方向键控制从单一元素提升到“容器内任意元素”可利用focusin冒泡版focus或addEventListener(focus, handler, true)捕获阶段监听在父容器统一处理焦点初始化这正是 article.md 中「Delegation: focusin/focusout」一节的用法加入边界与组合键可以用event.repeat控制长按加速用event.ctrlKey/event.metaKey等修饰键实现“加速移动”用Math.max/min限制移动范围防止元素移出视口。小结本练习的完整答案链为tabIndex 0解决聚焦问题 →onclick或onfocus结合getBoundingClientRect()与position: fixed初始化可移动状态 →onkeydown用e.key匹配Arrow*并以offsetWidth/offsetHeight为步长移动return false阻止页面滚动。它把「tabindex 聚焦机制」「焦点与键盘事件的关系」「fixed 定位与坐标计算」三个知识点串成了一条可复用的通用模式是理解 DOM 交互事件配合的典型范例。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐使用 carbon/utilities 的 makeDraggable为 HTML 元素实现鼠标与键盘双模拖拽使用 carbon/utilities 的 makeDraggable为 HTML 元素实现鼠标与键盘双模拖拽 makeDraggable 是 IBM Ca前端UI组件设计系统Zephyr RTOS终极指南快速实现USB HID键盘与鼠标驱动Zephyr RTOS终极指南快速实现USB HID键盘与鼠标驱动 想要为嵌入式设备添加USB HID功能吗Zephyr RTOS提供了完整的USB HID操作系统嵌入式RTOS物联网FFMS2 C API开发指南从FFMS_Init到FFMS_GetFrame快速写出你的第一个帧精确解码程序FFMS2 C API开发指南从FFMS_Init到FFMS_GetFrame快速写出你的第一个帧精确解码程序 FFMS2 FFmpegSource2是音视频上一篇终极GitTools Dumper使用指南轻松下载网站完整.git仓库的实用教程下一篇React Native Fast TFLite 常见问题解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考