点击空格时阻止浏览器触发默认事件

莫笑皮皮猪

于 2023-05-26 15:48:27 发布

阅读量258

点赞数

分类专栏：随笔文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_60380883/article/details/130888242

版权

随笔专栏收录该内容

10 篇文章

订阅专栏

这篇文章展示了如何在Vue组件中监听键盘事件，特别是空格键按下时，通过调用`e.preventDefault()`来阻止浏览器的默认点击行为。代码示例中，组件在创建时添加键盘事件监听器，并在空格键被按下时打印消息，防止页面滚动等默认动作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击空格时阻止浏览器触发默认事件

<template>
  <div @mousedown="handleMouseDown" @mouseup="handleMouseUp">点击或鼠标抬起我</div>
</template>

<script>
export default {
	created() {
		//开启监听键盘按下事件
		window.addEventListener('keydown', this.spaceKeyCode, true)
	},
	methods: {
		spaceKeyCode(e) {
			//阻止浏览器默认的点击空格事件
			e.preventDefault();
			//e.keyCode 是每个按键的编码，32是空格键
			if(e.keyCode === 32){
			console.log("触发我的空格事件")
		}
	}
}
</script>