如何阻止按下箭头键时div元素出现边框高亮效果

这个蓝色边框是浏览器默认的焦点轮廓样式，当div通过键盘操作获得焦点时就会触发。以下是几种可行的解决方法：

方法1：通过CSS自定义/移除焦点样式 #

直接针对目标div修改outline属性，既能去掉默认蓝色边框，也能兼顾可访问性（不建议完全移除焦点提示，除非有替代的可访问性方案）：

/* 移除默认焦点轮廓 */
.your-div-class:focus {
  outline: none;
}

/* 可选：自定义焦点样式，保证键盘导航的可访问性 */
.your-div-class:focus {
  outline: 2px solid #333; /* 替换为你需要的颜色 */
  outline-offset: 2px;
}

方法2：在事件处理中阻止默认行为 #

在keydown事件函数里，仅针对箭头键操作调用event.preventDefault()，阻止浏览器默认的焦点行为：

document.querySelectorAll('.your-div-class').forEach(div => {
  div.addEventListener('keydown', (e) => {
    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
      // 你的切换逻辑代码
      
      e.preventDefault(); // 阻止默认焦点行为，避免蓝色边框出现
    }
  });
});

注意：不要全局阻止默认事件，仅针对箭头键操作处理，避免影响Tab键等正常的键盘导航功能。

方法3：通过tabindex控制焦点状态 #

如果不需要div被键盘自然聚焦，可以给div设置tabindex="-1"，这样元素不会被Tab键选中，也不会自动显示焦点边框，但仍能通过JS手动设置焦点（不影响你的箭头切换逻辑）：

<div class="your-div-class" tabindex="-1">...</div>

内容的提问来源于stack exchange，提问作者AlePouroullis