为什么 keypress 事件在 Vue 里监听不到方向键？
我最近在用 Vue 做一个简单的键盘控制功能，想用 keypress 监听方向键（比如左、右箭头），但发现完全没反应。查了文档说 keypress 只对能产生字符的按键有效，那是不是意味着方向键根本不会触发 keypress？但我试过换成 keydown 就可以，只是不太确定该不该换，会不会有兼容性问题？
下面是我写的代码：
<template>
<input @keypress="handleKeyPress" placeholder="按方向键试试" />
</template>
<script>
export default {
methods: {
handleKeyPress(e) {
console.log('按下了:', e.key);
}
}
}
</script>- 2
回答
63浏览
为什么keypress事件无法捕获输入的字符？
在给输入框做实时验证时发现，用keypress事件监听输入，event.charCode返回的值总不正确，比如输入字母a会得到97，但转成字符串却变成undefined... 尝试过这样写： inpu...
- 2
回答
20浏览
为什么我的keypress事件无法捕获Enter键的输入？
我正在给一个搜索输入框添加键盘交互，想用keypress事件监听回车键触发搜索。按回车时控制台没有任何反应，但用keydown却能正常触发。我试过检查事件对象的keyCode和key属性，发现keyp...
- 2
回答
35浏览
为什么keypress事件检测到的大写字母显示为小写？
我给输入框绑定了keypress事件，想记录用户输入的每个字符。但发现当按下Shift+字母键时（比如Shift+A），event.key返回的始终是小写字母"a"，而不是预期的大写"A"。这该怎么正...
- 2
回答
72浏览
为什么我的Vue组件绑定的touchstart事件在移动端没反应？
我在用Vue开发移动端页面时，给按钮绑定了touchstart事件，但用手机测试完全没反应。换成click事件又能正常触发，这是为什么呢？ 代码是这样写的： <template> <...
- 1
回答
4浏览
IntersectionObserver 在 Vue 中不触发回调是为什么？
我在 Vue 里用 IntersectionObserver 监听一个元素是否进入视口，但回调一直没执行，不知道哪里出错了。 我已经确认元素确实滚动到了可视区域，也试过调整 threshold 和 r...
- 1
回答
15浏览
nvue中如何监听页面滚动到底部事件？
我在用uni-app开发一个nvue页面，想在用户滚动到底部时加载更多数据，但试了@scroll事件好像拿不到正确的滚动位置，文档里也没找到类似onReachBottom的API，这该怎么处理？ 目前...
- 1
回答
37浏览
Vue组件点击事件监控导致性能问题怎么办？
在Vue项目里给按钮加了点击监控，发现页面卡顿，代码用了防抖还是没用。这是为什么啊？ 我给所有按钮加了统一的点击上报逻辑，代码像这样写的： 购买 export default { methods: {...
- 2
回答
50浏览
在Vue组件单元测试中如何验证自定义事件触发次数？
我在测试一个带计数功能的按钮组件时，发现用Vue Test Utils的$emit无法正确验证事件触发次数。组件点击后会连续触发两次自定义事件，但测试总是显示调用次数为0： // CounterBut...
- 2
回答
31浏览
为什么Vue手势识别的Press事件无法触发？
在移动端项目里用Vue3和@vueuse/core的usePress做长按操作，但按了按钮完全没反应... 代码是这样写的： <template> <button ref="...
- 2
回答
75浏览
Vue中实现手势旋转时，为什么旋转角度计算不准？
我在用Vue做图片旋转功能，通过touch事件计算旋转角度，但发现旋转方向有时会反，角度数值也不对。代码里用Math.atan2计算两点夹角，但测试时顺时针转反而显示负角度，代码哪里出问题了？ exp...
keypress 监听不到方向键是正常的浏览器行为，不是 Vue 的问题。keypress 事件的设计初衷是监听能产生字符输入的按键，比如字母、数字、符号这些。方向键、Shift、Ctrl、Esc 这些功能键都不会触发 keypress。
放心换成 keydown 吧，兼容性完全没问题。keydown 是所有按键都能监听到，而且浏览器支持非常广泛，从 IE6 时代就有了，不用担心。
改成这样就行：
顺便说一句，Vue 还支持按键修饰符，写起来更简洁。比如只监听上下方向键可以这样写：
@keydown.up或@keydown.down，方向键对应的修饰符是.up、.down、.left、.right。简单总结一下就是：keypress 已经过时了，MDN 都标注为废弃状态，以后统一用 keydown 就完事了。