防止 Tab 键在 Javascript/Jquery 中选择 URL答案

【问题标题】：Prevent tab key from selecting URL in Javascript/Jquery防止 Tab 键在 Javascript/Jquery 中选择 URL
【发布时间】：2022-07-22 21:37:52
【问题描述】：

我正在制作游戏，并且有一个排行榜。我希望用户能够通过点击 TAB 键来切换排行榜。这是我的代码：

keysPressed = {};

if(keysPressed[KEY_TAB]){
    if(leaderboard.style.display == 'none'){
        $(leaderboard).fadeIn(100);
    } else {
        $(leaderboard).fadeOut(100);
    }

    keysPressed[KEY_TAB] = false;
}

document.addEventListener('keydown', (event) => {
    keysPressed[event.key.toLowerCase()] = true;
}, false);

document.addEventListener('keyup', (event) => {
    keysPressed[event.key.toLowerCase()] = false;
}, false);

注意：leaderboard 只是 document.getElementById('leaderboard')

这一切都很好，但是每当我按 Tab 键时，网页（我正在使用 Chrome）会自动选择/取消选择 URL 栏。有没有办法可以防止 TAB 键这样做，或者我需要切换到不同的键？这是演示我的问题的屏幕截图：

JavaScript 是首选，因为我对jQuery 比较陌生，但我也愿意。

先谢谢了~

【问题讨论】：

OffTopic：考虑使用$(leaderboard).is(":visible") :visible selector
感谢您的建议！但是有理由转换吗？

标签： javascript html jquery default

【解决方案1】：

使用Event.preventDefault()

来自 MDN：

Event 接口的 preventDefault() 方法告诉用户代理，如果事件没有得到明确处理，它的默认值不应像往常那样采取行动。

事件继续像往常一样传播，除非它的事件之一侦听器调用 stopPropagation() 或 stopImmediatePropagation()，其中任何一个都会立即终止传播。

如下所述，为不可取消的事件调用 preventDefault()，例如通过 EventTarget.dispatchEvent() 调度的一个，没有指定可取消：true 无效。

keysPressed = {};

if(keysPressed[KEY_TAB]){
    if(leaderboard.style.display == 'none'){
        $(leaderboard).fadeIn(100);
    } else {
        $(leaderboard).fadeOut(100);
    }

    keysPressed[KEY_TAB] = false;
}

document.addEventListener('keydown', (event) => {
event.preventDefault();
    keysPressed[event.key.toLowerCase()] = true;
}, false);

document.addEventListener('keyup', (event) => {
event.preventDefault();
    keysPressed[event.key.toLowerCase()] = false;
}, false);

【讨论】：