如何通过左右方向键onkeydown事件实现多语言站点页面前后导航

架构老林

2026-10-4

问题根源

事件绑定对象错误：当前onkeydown绑定在<a>标签上，只有该标签处于聚焦状态时才会响应按键事件，普通浏览场景下用户不会主动聚焦箭头元素，因此无法触发跳转
内联事件语法错误：你写的内联onkeydown没有传入事件对象e，同时混用了if判断和三目运算符，语法错误导致代码无法执行
路由输出缺少引号：{{ route('contact') }}输出的是字符串类型URL，直接赋值给window.location.href时未用引号包裹，会被识别为变量引发语法报错

解决方法

你咨询的全局绑定问题答案是肯定的：要实现无需聚焦特定元素的全局按键触发，需要将keydown事件绑定到document或body这类全局元素上。

代码修改步骤

移除<a>标签上的错误内联onkeydown属性，HTML结构修改如下：

<div>
    <a href="{{ route('contact') }}" class="left-arrow arrow-home-left">
        <i class="fas fa-angle-left fa-5x"></i>
    </a>
</div>
<div>
    <a href="{{ route('projects') }}" class="right-arrow arrow-home-right">
        <i class="fas fa-angle-right fa-5x"></i>
    </a>
</div>

新增全局按键监听JS代码，可放在页面<script>标签内：

document.addEventListener('keydown', function(e) {
    // 过滤输入框、文本域、下拉框、可编辑元素的按键事件，避免影响正常输入操作
    const excludeElements = ['INPUT', 'TEXTAREA', 'SELECT'];
    if (excludeElements.includes(e.target.tagName) || e.target.isContentEditable) {
        return;
    }
    // 左方向键跳转contact页
    if (e.key === 'ArrowLeft') {
        window.location.href = "{{ route('contact') }}";
    }
    // 右方向键跳转projects页
    if (e.key === 'ArrowRight') {
        window.location.href = "{{ route('projects') }}";
    }
});