仅在按下键时处理 VueJS 事件答案

【问题标题】：Handle VueJS event only when key is pressed仅在按下键时处理 VueJS 事件
【发布时间】：2021-02-23 04:00:12
【问题描述】：

我使用的是第三方库提供的VueJS组件，它有自己的事件。我可以像往常一样使用“v-on”指令处理此类事件并指定有趣的事件名称，如下所示：

<TheComponent v-on:itemchanged="handler"/>

但是只有当 'itemchanged' 出现并按下 CTRL 键时才可以运行处理程序吗？不按下 CTRL 键时，处理程序不应运行。

我尝试使用 click.crtl 和 keydown.ctrl 但没有成功。

【问题讨论】：

我找到了一个半工作的解决方案，我用v-on:click.ctrl="pressed = true" 将组件包装到外部 div 中。接下来在嵌套组件的处理程序中，我正在检查“按下”变量。它有效，但只能从第二次点击开始。

标签： vue.js vue-directives

【解决方案1】：

是否可以仅在按下 CTRL 键时出现“itemchanged”时运行处理程序？

假设itemchanged 由change 事件触发：不，不是没有解决方法。与键盘和鼠标事件不同，change 不包含键盘信息。您需要单独跟踪 ctrl 按键的状态，因为 JavaScript has no way of testing whether a key is down 在这些事件之外。

插件

实现它的一种封装方法是使用插件：

const pluginKeypresses = function(Vue) {
  const keyPresses = {
    Control: false
  }
  window.onkeyup = function(e) { keyPresses[e.key] = false; }
  window.onkeydown = function(e) { keyPresses[e.key] = true; }
  Vue.prototype.$keyPresses = Vue.observable(keyPresses);
}
Vue.use(pluginKeypresses);

_{注意：此处的 e.key 检测是截至 2020 年 11 月的当前标准，但为 not yet fully supported by IE and some other browsers。如果 IE 对您很重要，请将 key detection implementation 更改为您喜欢的。}

用法

您可以从应用中的任何位置测试this.$keyPresses.Control（布尔值）

Demo

【讨论】：

【解决方案2】：

您没有收到带有此事件的事件对象吗？通过向handler 添加参数，您应该能够捕捉到事件，并检查按下了哪个键。然后只需在处理函数的开头添加 if 语句即可。

【讨论】：

如果适当的键盘事件$event 已经通过，那么.ctrl 会起作用
是的，我收到了事件对象，但如果使用“v-on:itemchanged”，它不包含任何有关按键的信息。如果我尝试将其修改为“v-on:itemchanged.ctrl”或“v-on:click.ctrl”，则它不起作用。同时“v-on:click.ctrl”适用于简单的 div 元素。所以我认为这个组件可能不支持基于键的事件。
@lesovsky 这可能是因为该事件是一个change 事件，它没有键盘信息