Vue 在按钮上添加键盘事件监听，直接按键不响应，得点击一次才行。

This topic created in 3444 days ago, the information mentioned may be changed or developed.

<div id="app" class="num">
	{{number}}
	<br>
	<button class="btn" v-on:keyup.space="rand" v-on:click="rand">随机</button>
</div>

var app = new Vue ({
	el:'#app',
	data:{
		number:'扔个数字吧，谁最小谁去拿外卖'
	},
	methods: {
		rand:function (){
			// 产生随机整数
			var a = Math.random()
			var b = a*100
			this.number = parseInt(b)
		}
	}
})

点击可以正常工作；点击一次后，再按空格键也正常工作；但是直接按空格键就不会正常工作。

请问这是什么原因导致的，解决方法有哪些？

rand

var

空格键

v-on

4 replies • 2016-12-18 00:55:35 +08:00

bayallen

Dec 17, 2016

你把 keyup 事件绑定在按钮上面，如果焦点不在按钮上，就无法响应这个事件了。点击之后，焦点就在按钮上，所以这时按空格键有效。

可以尝试把 keyup 事件绑定在 document 上面。

libook

Dec 17, 2016

焦点不在 button 上，所以不想赢 keyup 事件，可以去查一查如何 focus 到一个元素上

Jiki

Dec 17, 2016

@ferrum 经过一些尝试，没能实现用 vue 的方式绑定 keyup 事件到 document 上。请问可以提供具体一点的思路吗？

bayallen

Dec 18, 2016 via iPhone

@Jiki 你这是 Vue 2.0 吧？ 1.0 有个 ready 事件，就直接在里面用 addEventListener 绑定。 2.0 也有类似事件，但改名了，不记得是什么了。

在一个 vue 组件内，想绑定事件到组件外的 HTML Element ，好像就只有这种方法。