网页禁用左右方向键失效问题求助（附jQuery代码）

你的代码在保留alert时生效，移除后失效，核心原因是：

• alert会阻塞JS执行流程，延迟了幻灯片组件的键盘事件监听触发，此时你的preventDefault()已经生效；
• 移除alert后，幻灯片的事件监听可能在你的代码之前触发（因为事件冒泡顺序或绑定优先级问题），导致默认切换行为无法被阻止。

同时你的代码存在两个关键问题：

1. 混用了全局event对象和函数参数e，在部分浏览器环境下会导致preventDefault()失效；
2. e.stop()不是标准DOM事件方法，无法正确阻止事件传播。

修正后的代码方案 #

方案1：使用事件捕获优先阻止（最稳妥） #

通过addEventListener的第三个参数开启事件捕获阶段，让你的事件处理逻辑优先于幻灯片的冒泡阶段监听执行：

jQuery(document).ready(function( $ ){  
    document.addEventListener('keydown', function(e) {
        // 匹配左右方向键（兼容新旧标准）
        if (e.keyCode === 37 || e.keyCode === 39 || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
            e.preventDefault(); // 阻止默认行为（页面/幻灯片切换）
            e.stopPropagation(); // 阻止事件冒泡到其他监听函数
        }
    }, true); // 开启捕获阶段，确保优先执行
});

方案2：替换非标准API并统一事件对象 #

如果你不想用捕获阶段，也可以修正原代码的API问题，同时确保事件绑定不被覆盖：

jQuery(document).ready(function( $ ){  
    document.onkeydown = function(e) {
        // 统一使用函数参数e，放弃全局event
        e = e || window.event;
        if (e.keyCode === 39 || e.key === 'ArrowRight') {
            e.preventDefault();
            e.stopPropagation();
        }
        if (e.keyCode === 37 || e.key === 'ArrowLeft') {
            e.preventDefault();
            e.stopPropagation();
        }
        // 最后返回false作为兜底（原生事件中等效于preventDefault+stopPropagation）
        return false;
    };
});

关键注意点 #

1. 优先用addEventListener：直接赋值onkeydown容易被其他脚本覆盖，addEventListener可以绑定多个事件处理函数；
2. 捕获阶段的作用：将事件处理放在捕获阶段执行，能确保你的逻辑先于幻灯片的冒泡监听触发，从根源阻止切换行为；
3. e.key替代keyCode：keyCode已被标准废弃，e.key（如ArrowLeft/ArrowRight）兼容性更好，更符合现代规范。

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