Javascript Vue：鼠标悬停时，如何判断是否按了控制键？

这是我第一次尝试跟踪鼠标在

上时是否按下了控制键（ctrl）：

...

---

这似乎对性能极为不利，因为每次用户移动鼠标时，都需要触发此代码。理想情况下，只有在按下/释放ctrl键时才会有代码运行。

您可以专门监听键盘事件。根据vue.js中的示例代码：

---

因此，您将侦听ctrl键的keyup和keydown事件，并将当前状态存储在处理程序函数中

在Vue中执行此操作的惯用方法是：

.dragarea{
宽度：200px；
高度：200px；
背景：浅蓝色；
}

在按住CTRL键的同时将鼠标移到此处

这似乎对性能极为不利，因为每次用户移动鼠标时，都需要触发此代码

在输入

mouseover

详细信息之前，即使该事件经常运行，您也不应该受到这样的性能影响。出于多种原因（以及libs/plugins/extensions/trackers），浏览器每隔一秒钟就会运行这样的代码。除非您不在处理程序上进行任何密集计算，否则应该没有问题

但归根结底，这就是你想要的东西

理想情况下，只有在按下/释放ctrl键时才会运行代码

有

mouseenter

和

mouseleave

事件。但这似乎不是你想要的。看看他们的行为：

newvue({
el:“#应用程序”，
数据：{
消息：“您好，Vue.js！”，
},
方法：{
亚胺（）{
console.log（'鼠标按CTRL键进入'）
},
imOut（）{
log（'鼠标离开时按CTRL'）
}
}
})

部分{背景：蓝色；高度：30px；宽度：100px；}

您是否仅在鼠标悬停期间尝试检查CTRL键？或者只是一般检查CTRL键是否按下（无论鼠标是否按下）？@tony19我只需要知道鼠标在组件上时是否按下CTRL键。这似乎是一个很好的解决方案，不过，如果Vue将其编译为

v-on:keyup=“submit”函数submit（e）{if（e.key==13）{//继续执行}

在内部，那么它将与我最初在OP中提到的解决方案相同。你知道Vue是否在内部这样做吗？你介意评论一下这样做对性能的影响吗？@AdamZerner我们在应用程序的大多数页面上观察鼠标X和Y、单击和控制单击。这并不是一个很大的性能损失，这个特殊的处理程序不会做任何激烈的事情，但我确实有其他处理程序在做激烈的事情。在我的例子中，运行模拟。因此，在模拟运行时，我担心此代码每秒会执行多次，从而降低模拟的性能。是的，

mouseenter/leave

方法不起作用，因为当鼠标停留在组件内时，它不会检测到CTRL键的按下。一个“覆盖的”具有高

z索引的
将只运行代码一次。我会尽量在回答中说明这一点。等一下，我做完了。过来看。也许能给你一些见解。但是现在，我认为您无法逃避
mousemove
事件，因为如果用户在元素中按住CTRL键，那么这是拾取它的唯一方法。
<template>
  <section v-on:mouseover="controlKeyPressed = $event.ctrl">...</section>
</template>

<!-- only call `vm.submit()` when the `keyCode` is 13 -->
<input v-on:keyup.13="submit">

<section @mouseover.ctrl="handleMouseEvent">