当前位置: 首页 > news >正文

全局的键盘监听事件

一、设定全局键盘监听事件 

放在vue 的created()或者mounted ()中,可对整个文档进行键盘事件监听。

new Vue({  created() {  window.addEventListener('keydown', this.handleKeydown);  },  beforeDestroy() {  window.removeEventListener('keydown', this.handleKeydown);  },  methods: {  handleKeydown(e) {  console.log('keydown event triggered', e);  }  }  
}).$mount('#app');

 或者

 // 监听键盘事件document.addEventListener('keydown', function (event) {console.log('按下的键: ', event.key)// 根据不同的键执行不同的操作switch (event.key) {case 'Delete':self.delEl()// 执行 a 键对应的操作breakcase 'Backspace':self.delEl()// 执行 b 键对应的操作break// 其他键...default:break}})

二、特定的div中禁用全局的键盘事件

<template>  <div @keydown.stop>  <!-- 键盘事件将不会冒泡到该div的父元素 -->  </div>  
</template>

关键:@keydown.stop

http://www.lryc.cn/news/170064.html

相关文章:

  • Qt自定义QSlider(支持水平垂直)
  • 会话控制学习
  • dweb-browser阅读
  • ChatGPT:使用fastjson读取JSON数据问题——如何使用com.alibaba.fastjson库读取JSON数据的特定字段
  • 2、ARM处理器概论
  • 【Python】福利彩票复式模拟选号程序
  • Pytorch 机器学习专业基础知识+神经网络搭建相关知识
  • torch 和paddle 的GPU版本可以放在同一个conda环境下吗
  • MYBATIS-PLUS入门使用、踩坑记录
  • C# 静态类和sealed类(密封类)的区别
  • el-table如何实现自动缩放,提示隐藏内容
  • CRM客户管理软件对出海企业的帮助与好处
  • 【QT--使用百度地图API显示地图并绘制路线】
  • C数据结构二.练习题
  • 猫头虎博主第5️⃣期赠书活动:《Java官方编程手册(第12版·Java 17)套装上下册》
  • (1)数据库 MSQ 数据库 安装 使用 以及增删改查
  • 什么测试自动化测试?
  • 【踩坑篇】代码中使用 Long 作为 Map的Key存在的问题
  • 微服务保护-授权规则/规则持久化
  • 练习敲代码速度
  • uni-app:实现条件判断展示图片(函数判定+三目运算)
  • http概念
  • Postman应用——Variable变量使用(Global、Environment和Collection)
  • php高级 TP+Redis实现发布订阅和消息推送案例实战
  • Python 基础入门
  • 【跟小嘉学 Rust 编程】二十九、Rust 中的零拷贝序列化解决方案(rkyv)
  • 路由器端口转发
  • Redis模块一:缓存简介
  • 【去除若依首页】有些小项目不需要首页,去除方法
  • Ardupilot — EKF3使用光流室内定位代码梳理