我们都知道因为js是单线程的，所以没有可以同时触发键盘两个事件的方法

今天我们就来做一个可以实现这个功能方法

先来看一下成品图效果

接下来我们来看下具体是怎么实现的

注释写在了代码里面

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         .demo{

             width: 30px;

             height:10px;

         }

         .demo1{

             position: absolute;

             left:500px;

             top:500px;

             background:red;

         }

         .demo2{

             background:green;

             position: absolute;

             left:600px;

             top:500px;

         }

     </style>

 </head>

 <body>

     <div>

         <div class="demo demo1"></div>

         <div class="demo demo2"></div>

     </div>

     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>

     <script>

         var a_left = false;      //先声明4个变量等于false

         var a_right = false;

         var b_left = false;

         var b_right = false;

         $('body').keydown(function(e){  //绑定按下事件 ，按下按键时变量等于true

             switch(e.keyCode){

                 case 37:

                     a_left = true;

                     console.log('左按下');

                     break;

                 case 39:

                     a_right = true;

                     console.log('右按下');

                     break;

                 case 65:

                     b_left = true;

                     console.log('A按下');

                     break;

                 case 68:

                     b_right = true;

                     console.log('D按下');

                     break;

             }

         });

         $('body').keyup(function(e){  //绑定抬起事件，按键抬起时变量等于false

             switch(e.keyCode){

                 case 37:

                     a_left = false;

                     console.log('左抬起');

                     break;

                 case 39:

                     a_right = false;

                     console.log('右抬起');

                     break;

                 case 65:

                     b_left = false;

                     console.log('A抬起');

                     break;

                 case 68:

                     b_right = false;

                     console.log('D抬起');

                     break;

             }

         });

         //然后开启一个定时器，不停的判断4个全局变量现在的状态。

         //比如A按键按下，变量即等于true，这时再按键左按键变量也是等于true的，所以并不会起到冲突

         //可实现同时触发两个按键事件

         setInterval(function(){

             if(a_left){

                 $('.demo1').css('left','-=5');

             }

             if(a_right){

                 $('.demo1').css('left','+=5');

             }

             if(b_left){

                 $('.demo2').css('left','-=5');

             }

             if(b_right){

                 $('.demo2').css('left','+=5');

             }

         },5)

     </script>

 </body>

 </html>

谢谢观看，如有不足请指教！  谢谢观看，如有不足请指教！谢谢观看，如有不足请指教！

jQuery同时监听两个事件---实现同时操控两个按键的更多相关文章

  1. jquery -- 同时监听多个事件

    多个事件触发同一反应 $("#redrow").on("click touchend",function(){});//每个监听事件之间用 “空格” 隔开 多个 ...

  2. js与jquery实时监听输入框值变化方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...

  3. js与jquery实时监听输入框值的oninput与onpropertychange方法

    文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...

  4. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  5. IOS之UI--自定义按钮实现代理监听点击事件

    前言: Objective-C提供的按钮监听事件的方法是 不含参数的监听方法 [button实例对象 addTarget:self action:@selector(func) forControlE ...

  6. Android监听点击事件实现的三种方法

    监听点击事件实现的三种方法:1.匿名内部类2.外部类3.直接实现接口 1.匿名内部类: package com.jereh.calculator; import android.content.Con ...

  7. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  8. javascript 原生方法监听DOM结构改变事件

    js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...

  9. WPF之监听组合键事件

    private void KeyDown(object sender, KeyEventArgs e) { if (e.Key== Key.Up && Keyboard.Modifie ...

随机推荐

  1. UWP 新手教程2——怎样实现自适应用户界面

    系列文章 UWP新手教程1--UWP的前世今生 如上文所说的,布局面板依据可用的屏幕空间.指定界面元素的大小和位置. 比如StackPanel 会水平或垂直排列界面元素.Grid 布局与CSS 中的表 ...

  2. Java基础：执行时异常和非执行时异常

    1.Java异常机制 Java把异常当做对象来处理,并定义一个基类java.lang.Throwable作为全部异常的超类. Java中的异常分为两大类:错误Error和异常Exception.Jav ...

  3. AOP是怎么实现的，有几种方式

    1.静态AOP:在编译期,切面直接以字节 码的形式编译到目标字节 码文件中. AspectJ属于静态AOP,是在编译时进行增强,会在编译的时候将AOP逻辑织入到代码中,需要专有的编译器和织入器. 优点 ...

  4. Gym - 100341C FFT优化DP

    题目链接:传送门 题解: 设定dp[i][j]在深度为i下,使用j个节点的方案数 显然的转移方程组就是 dp[h][n] = dp[h-1][i] * dp[h-1][n-i-1] + 2*dp[h- ...

  5. 20170221 SE03 打包请求

    请求处理:SE03 只会有其中两三个功能,还需要学习. 请求打包,是传输请求时候常用的一种方法. 步骤如下: 注意点:1.打包请求一定仔细检查,不要遗漏           如果请求不多,分开传是更好 ...

  6. PHP获取类名及所有函数名

    PHP获取当前类名.方法名  __CLASS__ 获取当前类名  __FUNCTION__ 当前函数名(confirm)  __METHOD__ 当前方法名 (bankcard::confirm) _ ...

  7. 文件读写&&内容替换

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...

  8. Hive两种访问方式：HiveServer2 和 Hive Client

        老版HiveClient:  要求比较多,需要Hive和Hadoop的jar包,各配置环境.       HiveServer2:   使得与YARN和HDFS的连接从Client中独立出来, ...

  9. e.target与e.currentTarget的区别

    在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两者的区别,因此有必要把这两个属性好好梳理一下,加深理解,以便日后的查询. MDN中对t ...

  10. ODC(Orthogonal Defect Classification)简介——正交缺陷分类法

    Defect分析是软件开发和测试中一个重要的环节,ODC介绍了一种不同于大家常用的非常有效的defect分类及分析方法.这篇文章简单的向大家介绍了什么是ODC,以及如何在项目和产品开发中使用ODC来改 ...