VueJS 通过挂载的事件监听器监听组合键答案

【问题标题】：VueJS listening to keycombinations via mounted event listenerVueJS 通过挂载的事件监听器监听组合键
【发布时间】：2018-08-23 10:29:24
【问题描述】：

我有工作的全局按键监听器，但它只能捕获单个按键。如何捕捉 ctrl+enter 之类的组合？

mounted() 
{
    window.addEventListener
    (
        "keypress", e => 
        {
          console.log(e.key);
        }
    );
},

Input device events

click, contextmenu, DOMMouseScroll, dblclick, gamepadconnected, gamepaddisconnected, keydown, keypress, keyup, MozGamepadButtonDown, MozGamepadButtonUp, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, mousewheel, MozMousePixelScroll, pointerlockchange, pointerlockerror,wheel

这些似乎都不适合它

这也不能正常工作

"keypress", e => 
{
    if (e.ctrlKey)
    {
        console.log(e.key);
    }
}

【问题讨论】：

标签： javascript vue.js vuejs2 frontend

【解决方案1】：

试试这个，我们正在检查 ctrl 是否被按下并且（另一个）按下的键不是 ctrl：

window.addEventListener
    (
        "keydown", e => 
        {
          var evt = window.event ? event : e;
          if (evt.ctrlKey && evt.keyCode !== 17) {
            console.log('Ctrl + ' + e.key);
          }
        }
    );

JSFiddle

您可能还对使用 vue-global-events 感兴趣，它允许您以 Vue 样式编写全局键侦听器（例如 @keyup.ctrl.tab="nextTab"）。

【讨论】：