Javascript @keydown.ctrl和@keyup.ctrl事件修饰符不响应相应的键盘事件

我正在编写一个VueJS应用程序，它将具有一个自定义上下文菜单，当用户将鼠标悬停在页面上的某个特定项目上时，该菜单就会出现。菜单是动态的，这意味着当用户将鼠标悬停在不同的项目上时，它将发生变化。如果用户按下控制键，菜单将是静态的，以便他们可以与菜单中的项目交互

我的问题是，

@keydown.ctrl=“…”

事件似乎按预期响应，

@keydup.ctrl=“…”

事件没有响应。我环顾四周，尝试了不同的修饰符，如

.exact

和

.caputure

，但它们似乎无法解决问题

但是，将

@keyup.ctrl

更改为

@keyup.control

才有效。

.control

对

@keyup

事件有效，但对

@keydown

事件无效

需要使用不同的键修改器的

@keydown

和

@keydup

之间有什么区别

下面是根元素的示例

<div
  tabindex="0"
  @keydown.esc.exact="() => (displayContext = false)"
  @keydown.ctrl.exact="() => (keepContext = true)"
  @keyup.control="() => (keepContext  = false)"
>
...
</div>

...

可能有几个与此相关的问题

当您试图捕获输入（input、select或textarea）元素的按键时，捕获按键事件（从vue模板）最可靠。因为当您关注该元素时，所有键盘事件都会在该元素上触发。在您的示例中，页面上有几个div，它们可能不是活动元素。一个合适的解决方法是捕获document.body上的所有keydown或keydup事件，并检查event.target是否符合您的条件。另一个好处是可以简化模板代码（特别是当您有许多上下文菜单区域时）

您提出的另一个主题是@keydown.ctrl和@keydown.control之间的区别

第一个：.ctrl事件修饰符通常与另一个键结合使用，（例如：“@keydown.ctrl.s=”autoSave“）
第二个：。控件在按下键

control

时激发，不能与其他键组合使用

我尝试了以下两种设置：

<input
    @keydown.control="logKeydown"
    @keyup.control="logKeyup">
>

>

还有这个

<input
    @keydown.ctrl="logKeydown"
    @keyup.ctrl="logKeyup">
>

>

带有@keydown.control的设置工作可靠。@keyup.ctrl不能可靠地工作（有时它会错过向下键，有时它会错过向上键）

---

总之，我建议在使用非输入元素时，在document.body上侦听键盘事件。其次是使用.control修饰符（而不是.ctrl）修饰符。

您可以使用此网站直观地查看哪些键触发了哪些事件：
甚至在这个问题上：

如您所见，不能仅在ctrl键上设置侦听器。您需要一个

ctrl+a

或另一个与之配对的键来有效地跟踪它

下面是在不按任何其他键的情况下跟踪

ctrl

事件的最佳实现：

• 按住ctrl键并将div悬停（

  @mouseover.ctrl=“holdCtrlAndHover”

  ）
• 按住ctrl键时，保留div（

  @mouseleave.ctrl=“holdCtrlAndLeave”

  ）
• 按住ctrl键，将光标悬停在div上，然后单击鼠标（

  @click.ctrl=“hoverAndHoldCtrlThenMouseClick”

  ）

实施示例：

---

有关

MouseEvent.ctrlKey

的快速参考，请参见：

下面是对事件键侦听器差异的快速解释：

---

很高兴知道：

keypress

事件现在非常确定

。control

是

.ctrl

的别名。不确定如何对未触发的事件做出反应，您的解决方案在我这方面不起作用。下面是“@keyup/keydown”的演示。control和.ctrl，您可以看到它们实际上是不同的。另外，“@keyup.ctrl.y”与“@keyup.control.y”的组合工作方式不同，“@keyup.ctrl.y”计算一次出现，而“@keyup.control.y”将被触发两次，这就是为什么我得出结论，.ctrl和.control实际上是不同的。我希望有一个官方来源来证实这一点。这里似乎有退路。在使用

@mouseover.ctrl

事件进行快速测试后，它会按照我的预期工作。谢谢你的帮助！

<input
    @keydown.ctrl="logKeydown"
    @keyup.ctrl="logKeyup">
>