键盘按键控制DOM元素字体大小的事件监听无效问题求助

嘿，我来帮你排查下代码里的几个关键问题，这应该就是你按键没反应的根源：

1. 元素选择器语法错误 #

你写的document.querySelector('exampleElement')是在找名为<exampleElement>的HTML标签，但你大概率是想用类选择器或ID选择器吧？如果目标元素的类名是exampleElement，要写成.exampleElement；如果是ID，就写成#exampleElement，不然根本选不到目标元素，后续的事件监听自然就无效了。

2. 普通元素默认无法触发键盘事件 #

keydown事件只有当元素获得焦点时才会触发，像div、p这类普通元素默认是不能被聚焦的。解决方法有两种：

• 给目标元素添加tabindex="0"属性，让它可以被聚焦；
• 或者把事件监听绑定到document上，这样不管焦点在哪，按键都能触发逻辑。

3. 事件判断逻辑不匹配 #

你用case 38和case 40来判断按键，但event.key返回的是字符串（比如'ArrowUp'、'ArrowDown'），不是数字键码。如果想用键码判断，应该用event.keyCode（不过现在更推荐用event.key，可读性更强）。

4. 字体大小变量未实时更新 #

你只在初始化时获取了一次exampleSize，之后每次按键都是基于这个初始值计算，而不是元素当前的实时字体大小，就算代码执行了，视觉上也可能没变化（或者只会变一次）。

5. 代码笔误 #

在case 40里你写了ballon.style.fontSize，但你的变量名是example，这明显是手滑写错了，会直接导致代码报错。

下面是修正后的完整代码，你可以参考下：

<!-- 给目标元素加tabindex，让它可以被聚焦触发事件 -->
<div class="exampleElement" tabindex="0">测试文本</div>

<script>
// 修正选择器，这里假设是类选择器
let example = document.querySelector('.exampleElement');

// 获取当前元素字体大小的工具函数
function getFontSize(element) {
  return parseInt(window.getComputedStyle(element).fontSize);
}

// 绑定事件到元素上（因为加了tabindex，现在可以聚焦触发）
example.addEventListener('keydown', (event) => {
  // 每次按键都实时获取当前字体大小
  let currentSize = getFontSize(example);
  // 用event.key判断按键，更直观
  switch(event.key){
    case 'ArrowUp':
      example.style.fontSize = `${currentSize + Math.ceil(currentSize * 0.10)}px`;
      break;
    case 'ArrowDown':
      // 修正笔误，改成example
      example.style.fontSize = `${currentSize - Math.ceil(currentSize * 0.10)}px`;
      break;
  }
});

// 可选方案：如果不想依赖元素聚焦，把监听绑到document上
// document.addEventListener('keydown', (event) => {
//   let currentSize = getFontSize(example);
//   switch(event.key){
//     case 'ArrowUp':
//       example.style.fontSize = `${currentSize + Math.ceil(currentSize * 0.10)}px`;
//       break;
//     case 'ArrowDown':
//       example.style.fontSize = `${currentSize - Math.ceil(currentSize * 0.10)}px`;
//       break;
//   }
// });
</script>

另外，建议你打开浏览器开发者工具（F12）的Console面板，看看有没有报错信息，这是排查这类前端问题最快的方法～

内容来源于stack exchange