仅在按下键时处理 VueJS 事件

Question

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

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

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

我试过 click.crtl 和 keydown.ctrl 但没有成功。

Answer 1

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

Answer 2

Is it possible to run handler only when 'itemchanged' occurs with CTRL key pressed?

假设 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 检测是截至 11/2020 的当前标准，但 not yet fully supported by IE and some other browsers. If IE matters to you, change the key detection implementation 符合您的喜好。}

用法

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

Demo

仅在按下键时处理 VueJS 事件

Handle VueJS event only when key is pressed

vue.js

vue-directives