js键盘事件keydown事件,防止重复触发,组合键的配合使用

js键盘事件keydown事件,防止重复触发

键盘事件类型主要有三种: keydownkeypress(不建议使用,部分浏览器已放弃)keyup


添加普通键盘keydown事件

// 监听键盘按下事件document.addEventListener('keydown', function(event) {// 输出按下的键的键码console.log('Key pressed:', event.key, 'Key code:', event.keyCode);});

但是此事件会如果不释放按键就会重复触发,如何阻止呢?


阻止keydown事件重复触发

①使用一个标志变量来跟踪按键的状态

let keyDownFlag = false;// 监听键盘按下事件document.addEventListener('keydown', function(event) {if (!keyDownFlag) {keyDownFlag = true;console.log('Key pressed:', event.key, 'Key code:', event.keyCode);}});// 监听键盘释放事件document.addEventListener('keyup', function() {keyDownFlag = false;});

②通过事件自带的属性判断
repeat 属性可以用于判断键盘事件是否是由按键保持按下而持续触发的。

// 监听键盘按下事件document.addEventListener('keydown', function(event) {if (!event.repeat) {console.log('Key pressed:', event.key, 'Key code:', event.keyCode);}

在这个例子中,event.repeat 属性被用于检查是否是由按键保持按下而触发的事件。如果 event.repeat 为 false,则表示这是一个新的按键事件,而不是持续触发的事件。


组件键的配合使用

组件键一般就是就是通过keydown事件来触发

document.onkeydown = function (oEvent) {console.log(oEvent);
}

在这里插入图片描述
可以看到event对象中返回很多信息,其中keycode属性中包含一份代码,是键盘上对应的ASCII码,type是触发事件的类型等等…

这里我们有几个属性是我们用的到的,就是altkey属性和ctrlkey属性还有shiftkey。它们代表着键盘上的alt、ctrl、shift键对于事件触发的判断。当事件由这几个键触发时,它们的值会变成true.
那我可以通过上边的内容结合这几个属性来监听键盘事件。

  • 比如要监听ctrl + s的组合事件
document.onkeydown = functionb(oEvent) {var oEvent = oEvent || window.oEvent; //获取键盘的keyCode值var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;//获取ctrl 键对应的事件属性var bCtrlKeyCode = oEvent.ctrlKey || oEvent.metaKey;if( oEvent.nKeyCode == 83 && bCtrlKeyCode  ) {alert('save');//doSomeThing...}
}
  • 比如要监听Alt+ q的组合事件
document.onkeydown = functionb(e) {if(e.altKey && e.keyCode == 81){if(e.repeat){return }//todo somethink}
}

虽然mac电脑操作有别于普通win电脑,但并不代表没有alt键。 在mac电脑找到alt键并不难,键盘左下角的option键其实就是苹果的alt键,旁边的control键对应pc电脑的ctrl键,command键对应是win键,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/234388.shtml

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

相关文章

搭建动态网站之——基于Redhat8.6搭建Discuz论坛

目录 一、动态网站与静态网站区别 1、提供用户互动接口的动态网站 2、搭建动态网站的需求: 二、搭建步骤 第一步:www服务器配置 第二步;编辑网页文件 第三步:使用xftp 将Discuz包传到/discuz解压 1、将Discuz包移动到/discuz 2、解压…

ArkTS @Observed、@ObjectLink状态装饰器的使用

作用 Observed、ObjectLink装饰器用于在涉及嵌套对象或者数组元素为对象的场景中进行双向数据同步。 状态的使用 1.嵌套对象 我们将父类设置为Observed状态,这个时候,子应该设置ObjectLink才能完成数据的双向绑定,所以我们构建一个组件&…

C语言插入排序算法及代码

一、原理 在待排序的数组里&#xff0c;从数组的第二个数字开始&#xff0c;通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。 二、代码部分 #include<stdio.h> #include<stdlib.h> int ma…

Android的基础开发

基础开发 listView ListView就是列表条目&#xff0c;可以向下滚动&#xff0c;也可以点击。 首先设置两个视图布局 activity_main2.xml【充当容器{ListView}】 <ListViewandroid:layout_width"match_parent"android:layout_height"match_parent"a…

AWS向量数据库Amazon OpenSearch Service使用测评

前言 在大模型盛行的当今&#xff0c;选择适宜的数据库显得尤为重要。因为你需要面对海量训练数据&#xff0c;快速的检索至关紧要&#xff0c;以及对于存储的要求也是至关重要的。对于海量的数据查询和存储是需要巨大的算力支持。向量数据库常用在一些图像文本或者视频的生成…

【大数据存储与处理】实验二 HBase 过滤器操作

实验二 HBase 过滤器操作 【实验目的】&#xff1a; 1.掌握使用 HBase 过滤器进行全表扫描。 【实验内容与要求】&#xff1a; 在 HBase 中&#xff0c;Get 和 Scan 操作都可以使用过滤器来设置输出的范围&#xff0c;类似于 SQL 里面 的 Where 查询条件。使用 show_filte…

【VScode和Leecode的爱恨情仇】command ‘leetcode.signin‘ not found

文章目录 一、关于command ‘leetcode.signin‘ not found的问题二、解决方案第一&#xff0c;没有下载Nodejs&#xff1b;第二&#xff0c;有没有在VScode中配置Nodejs第三&#xff0c;力扣的默认在VScode请求地址中请求头错误首先搞定配置其次搞定登入登入方法一&#xff1a;…

obswebsocket+douyinAPI+python,教你如何三步搭建自己的AI美女直播间,24小时的永动机

一&#xff1a;什么是AI直播美女直播间 就是在直播的时候通过弹幕进行选择不同的ai人物进行跳舞的直播间大致就是 可以看到左边是有提示&#xff0c;根据观众刷礼物的不同进行选择某一个AI人物进行展示&#xff0c;怎么通过技术手段实现呢 二&#xff1a;你需要懂的 其实还…

vmware安装银河麒麟V10高级服务器操作系统

vmware安装银河麒麟V10高级服务器操作系统 1、下载银河麒麟V10镜像2、VMware安装银河麒麟V10高级服务器操作系统2.1、新建虚拟机2.2、安装虚拟机 3、配置银河麒麟V10高级服务器操作系统3.1、安装vmware tools3.2、配置静态IP地址 和 dns3.3、查看磁盘分区 1、下载银河麒麟V10镜…

AI工具网站汇总——学习的好帮手

一、聊天AI 1.ChatGPT 地表最强AI聊天机器人 网址&#xff1a;https://chat.openai.com 2.Anthropic Anthropic发布的与ChatGPT竞争的聊天机器人 网址&#xff1a;https://www.anthropic.com 3.文心一言 百度全新知识增强大语言模型&#xff01;国产聊天机器人 网址&…

so-vits-svc的使用

1. 启动工程 找到工程的路径&#xff0c;找到启动的bat文件&#xff0c;这里以 d:/so-vits-svc为例。 2. 启动过程 启动后会出现cmp的一个弹框&#xff0c;初始启动相对较慢&#xff0c;请耐心等待一会儿&#xff0c;启动完成后&#xff0c;会出现一个页面&#xff0c;如下…

JDK各个版本特性讲解-JDK14特性

JDK各个版本特性讲解-JDK14特性 一、Java14概述二、语法层面的变化1. instanceof2. switch表达式3. 文本块的改进4. Records记录类型 二、关于GC1.G1的NUMA内存分配优化2. 弃用SerialCMS,ParNewSerial Old3.删除CMS4.ZGC on macOS and Windows 三、其他变化1.友好的空指针异常提…

HAproxy做七层代理+keepalived高可用,实现动静分离,由nginx处理静态页面,tomcat处理动态页面

目录 一、三种软负载均衡器的区别 关于三种负载均衡器的性能对比&#xff1a; 关于三种负载均衡器的代理类型对比&#xff1a; 关于三种负载均衡器的健康检查对比&#xff1a; 二、haproxy的8中负载均衡调度算法 haproxy的会话保持的方式 haproxy的配置文件学习 三、实操…

(详解版)创建线程的四种方式

文章目录 Java中创建线程的四种方式1. 继承Thread类并重写 run 方法来创建线程2. 实现Runnable接口并实现 run 方法来创建线程。3. 使用Callable接口创建线程4. 使用Executor框架创建线程 Java中创建线程的四种方式 接下来我会详细解释这四种方式创建线程如何实现. 我们如果要…

【HarmonyOS开发】ArkTs关系型和非关系型数据库的存储封装

前面使用了首选项的存储方式&#xff0c;因此将其他的两种存储方式&#xff08;键值型数据库和关系型数据库&#xff09;也学习一下&#xff0c;简单记录一下&#xff0c;并进行封装&#xff0c;方便后续使用。 1、效果预览 2、使用条件 2.1 键值型数据库 键值型数据库实现数据…

RabbitMQ入门指南(三):Java入门示例

专栏导航 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、AMQP协议 1.AMQP 2.Spring AMQP 二、使用Spring AMQP实现对RabbitMQ的消息收发 1.案例准备阶段 2.入门案例&#xff08;无交换机&#xff09; 3.任务模型案例&#xff08;Work Queues&#xff0…

九.数据处理之增删改

数据处理之增删改 1.插入数据1.1实际问题1.2方式1&#xff1a;VALUES的方式添加1.3方式2&#xff1a;将查询结果插入到表中 2.更新数据3.删除数据4.MySQL8新特性&#xff1a;计算列5.综合案例 1.插入数据 1.1实际问题 解决方式&#xff1a;使用INSERT语句向表中插入数据 1.2方…

文献速递:生成对抗网络医学影像中的应用——用于生成前列腺MR-only影像治疗剂量规划的合成CT的深度学习模型:多中心研究

文献速递&#xff1a;生成对抗网络医学影像中的应用——用于生成前列腺MR-only影像治疗剂量规划的合成CT的深度学习模型&#xff1a;多中心研究 本周给大家分享文献的主题是生成对抗网络&#xff08;Generative adversarial networks, GANs&#xff09;在医学影像中的应用。文…

电源模块测试方法 | 怎么测试电源负载瞬态响应?

负载瞬态响应测试是检测电源稳定性和质量的重要方法之一&#xff0c;而电源稳定性是设备正常运行的基础。通过负载瞬态响应测试来检测电源的响应速度和稳定性&#xff0c;从而优化电源设计&#xff0c;提升性能&#xff0c;确保电子设备可以稳定工作。 什么是负载瞬态响应测试?…

js知识点1:防抖节流

js知识点1&#xff1a;防抖节流 防抖节流 防抖节流&#xff0c;本质上是优化高频率执行代码的一种手段 定义&#xff1a; 防抖: n 秒后再执行该事件&#xff0c;若在 n 秒内被重复触发&#xff0c;则重新计时 节流: n 秒内只运行一次&#xff0c;若在 n 秒内重复触发&#xff0…