全局的键盘监听事件

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

放在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.mzph.cn/news/86686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Fiddler抓包工具配置+Jmeter基本使用

一、Fiddler抓包工具的配置和使用 在编写网关自动化脚本之前&#xff0c;得先学会如何抓包&#xff0c;这里以Fiddler为例。会抓包的同学可以跳过这一步&#xff0c;当然看看也是没坏处的…… 局域网络配置 将要进行抓包的手机与电脑连入同一局域网&#xff0c;电脑才能够抓到…

Elasticsearch(Es搜索(简单使用、全文查询、复合查询)、地理位置查询、特殊查询、聚合操作、桶聚合、管道聚合)

Elasticsearch&#xff08;三&#xff09;——Es搜索&#xff08;简单使用、全文查询、复合查询&#xff09;、地理位置查询、特殊查询、聚合操作、桶聚合、管道聚合 一、Es搜索 这里的 Es 数据博主自己上网找的&#xff0c;为了练习 Es 搜索。 1、Elasticsearch 搜索入门 …

阻塞队列-生产者消费者模型

阻塞队列介绍标准库阻塞队列使用基于阻塞队列的简单生产者消费者模型。实现一个简单型阻塞队列 &#xff08;基于数组实现&#xff09; 阻塞队列介绍 不要和之前学多线程的就绪队列搞混&#xff1b; 阻塞队列&#xff1a;也是一个队列&#xff0c;先进先出。带有特殊的功能 &…

PostgreSQL 技术内幕(十)WAL log 模块基本原理

事务日志是数据库的重要组成部分&#xff0c;记录了数据库系统中所有更改和操作的历史信息。 WAL log(Write Ahead Logging)也被称为xlog&#xff0c;是事务日志的一种&#xff0c;也是关系数据库系统中用于保证数据一致性和事务完整性的一系列技术&#xff0c;在数据库恢复、高…

spring复习:(61)自定义CustomAutowireConfigurer

一、自定义注解&#xff1a; package cn.edu.tju.anno;import java.lang.annotation.*;Target({ElementType.FIELD, ElementType.METHOD, ElementType.PARAMETER, ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) Inherited Documented public interface MyQualifier …

若依前后端分离版搭建记录

一、如果是mysql8&#xff0c;得修改一下参数allowPublicKeyRetrieval为true&#xff0c;不然会报Public Key Retrieval is not allowed错误&#xff1a; 二、导入第二张表的数据库的时候&#xff0c;需要增加“--default-character-setutf8”参数才不会报错&#xff1a;

硕士应聘大专老师

招聘信息 当地人社局、学校&#xff08;官方&#xff09; 公众号&#xff08;推荐&#xff09;&#xff1a; 辅导员招聘 厦门人才就业信息平台 高校人才网V 公告出完没多久就要考试面试&#xff0c;提前联系当地院校&#xff0c;问是否招人。 校招南方某些学校会直接去招老师。…

DL2:A Deep Learning-Driven Scheduler for Deep Learning Clusters 阅读思考+组会

IEEE Transactions on Parallel and Distributed Systems CCF A 提问题记录 1、自己提出的问题 1.1 这篇文章解决的主要问题是什么&#xff0c;怎么理解&#xff1f; 传统的调度方法具有如下特点&#xff1a; 要么无法感知机器学习工作负载特性(如集群中的GPU的利用率)或ML…

文章投稿经历

1、卡时间 2、收费高、不收费的SCI2区以上的 3、计算机类的投文章确实难 因为快毕业了&#xff0c;考虑到时间原因找了几周的期刊&#xff0c;一直没投&#xff0c;结果投了一篇&#xff0c;马上就给拒了&#xff0c;应该是好的结果吧&#xff0c;能尽快投下一个 informatio…

嵌入式C++总结

1、new delete与malloc free区别 new delete是运算符&#xff0c;malloc free是函数。 前者不需要传入大小&#xff0c;后者需要。 前者会调用构造、析构函数&#xff0c;后者不会。 前者不需要强制转换&#xff0c;后者需要。 2、智能指针 智能指针是避免忘记释放动态申请对象…

Vue中的插槽--组件复用,内容自定义

插槽 文章目录 插槽插槽-默认插槽插槽-后备内容&#xff08;设置默认值&#xff09;插槽-具名插槽插槽–作用域插槽 插槽-默认插槽 作用&#xff1a;让组件内部的一些结构支持自定义 需求&#xff1a;要在页面中显示一个对话框,封装成一个组件&#xff08;对话框有很多功能是类…

antd/fusion表格增加圈选复制功能

背景介绍 我们存在着大量在PC页面通过表格看数据业务场景&#xff0c;表格又分为两种&#xff0c;一种是 antd / fusion 这种基于 dom 元素的表格&#xff0c;另一种是通过 canvas 绘制的类似 excel 的表格。 基于 dom 的表格功能丰富较为美观&#xff0c;能实现多表头、合并…

Spring之bean的生命周期源码解析

Spring最重要的功能就是帮助程序员创建对象&#xff08;也就是IOC&#xff09;&#xff0c;而启动Spring就是为创建Bean对象做准备&#xff0c;所以我们先明白Spring到底是怎么去创建Bean的&#xff0c;也就是先弄明白Bean的生命周期。 Bean的生命周期就是指&#xff1a;在Spr…

Nodejs 相关知识

Nodejs是一个js运行环境&#xff0c;可以让js开发后端程序&#xff0c;实现几乎其他后端语言实现的所有功能&#xff0c;能够让js与其他后端语言平起平坐。 nodejs是基于v8引擎&#xff0c;v8是Google发布的开源js引擎&#xff0c;本身就是用于chrome浏览器的js解释部分&#…

帆软FineReport决策报表之页面布局

最近在用帆软决策报表绘制首页大屏&#xff0c;记录使用过程&#xff0c;方便查看。 版本&#xff1a;FineReport10.0 第一步、页面布局 页面布局其实就是组件的排列组合&#xff0c;决策报表主区域body有两种布局方式&#xff1a;自适应布局和绝对布局。 1&#xff09;自适应…

第一百五十三回 如何实现滑动窗口

文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了自定义组件实现游戏摇杆相关的内容&#xff0c;本章回中将介绍 如何实现滑动窗口.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在本章回中介绍的滑动窗口表示在屏幕底部向上滑动时弹出一个窗口&a…

vue返回上一页(后退)的几种方法与区别

从a页面>b页面>c页面&#xff0c;当前在c页面&#xff0c;执行某方法后可以如同按了浏览器后退键一样返回b页面 若项目使用vue-router&#xff0c;this.$router.go(-1)可以回到上一页 this.$router.back() window.history.go(-1) 区别 go(-1): 原页面表单中的内容会丢…

问界M7的诸多优点(自动驾驶走进我们的生活二)

博主一直在问界工厂工作&#xff0c;从未对自己工厂的车如此关注过&#xff1b;但问界系列上市后&#xff0c;经常在茶余饭后看B站视频&#xff0c;发现问界车越来越多不可比拟的优点如下&#xff1a; 一、绿牌 绿牌特权在重庆可以随时过桥&#xff0c;不受限号限制。 二、增…

uLua:在AVR 8位微控制器上运行的高效Lua编译器与迭代器详细指南

1. 介绍 在嵌入式系统领域&#xff0c;资源的限制常常是一个巨大的挑战。微控制器&#xff0c;特别是那些只有1k RAM的微控制器&#xff0c;对于运行大多数现代编程语言来说&#xff0c;资源是非常有限的。但是&#xff0c;有了uLua&#xff0c;这一切都变得可能。uLua是一个专…

【Unity3D赛车游戏制作】开始界面场景搭建

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…