如何用JavaScript检测Win+Shift+S组合键并拦截系统截图弹窗？

问题描述 #

我需要用JavaScript检测Win+Shift+S组合键是否被按下，但目前系统自带的截图窗口会优先弹出，请问该怎么解决？相关按键的KeyCode如下：

KeyCode for:
Win - 91
Shift - 16
S - 83

另外无法使用shiftKey和metaKey，因为它们仅在最后释放时触发。以下是我的实现代码：

<script>
    const set = new Set();

    window.addEventListener('keydown', event => {
        set.add(event.keyCode)
        console.log(set)
    });

    window.addEventListener('keyup', event => {
        if (set.has(91) && set.has(16) && set.has(83)) {
            alert('made screen')
        }
        set.delete(event.keyCode);
        console.log(set)
    });
</script>

解决方案 #

核心思路 #

要解决系统截图优先触发的问题，关键是在检测到组合键按下时，立即阻止系统的默认行为，不让系统截胡这个按键事件。

优化后的代码 #

调整监听逻辑，在keydown事件中实时判断按键集合，一旦三个键都被按下，马上调用preventDefault()和stopPropagation()拦截系统行为：

<script>
    const pressedKeys = new Set();

    window.addEventListener('keydown', (event) => {
        pressedKeys.add(event.keyCode);
        
        // 检测Win+Shift+S组合键
        if (pressedKeys.has(91) && pressedKeys.has(16) && pressedKeys.has(83)) {
            // 阻止系统默认截图动作
            event.preventDefault();
            event.stopPropagation();
            // 执行你的自定义逻辑
            alert('Win+Shift+S被触发');
        }
    });

    window.addEventListener('keyup', (event) => {
        pressedKeys.delete(event.keyCode);
    });

    // 额外拦截keypress事件，防止漏网情况
    window.addEventListener('keypress', (event) => {
        if (pressedKeys.has(91) && pressedKeys.has(16) && pressedKeys.has(83)) {
            event.preventDefault();
            event.stopPropagation();
        }
    });
</script>

注意事项 #

• 只有当当前网页处于前台激活状态时，这个拦截才会生效；如果浏览器窗口被最小化或不是当前焦点，系统还是会触发默认截图。
• 部分浏览器或安全工具可能限制对Win键的拦截行为，需要在不同环境下测试兼容性。
• 推荐使用event.key替代keyCode（比如event.key === 'Meta'对应Win键，'Shift'对应Shift，'s'对应S），因为keyCode属于已废弃的API，长期来看兼容性更差。

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