我们都知道因为js是单线程的，所以没有可以同时触发键盘两个事件的方法
今天我们就来做一个可以实现这个功能方法
先来看一下成品图效果
接下来我们来看下具体是怎么实现的
注释写在了代码里面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .demo{ 10 30px; 11 height:10px; 12 } 13 .demo1{ 14 position: absolute; 15 left:500px; 16 top:500px; 17 background:red; 18 } 19 .demo2{ 20 background:green; 21 position: absolute; 22 left:600px; 23 top:500px; 24 } 25 </style> 26 </head> 27 <body> 28 <div> 29 <div class="demo demo1"></div> 30 <div class="demo demo2"></div> 31 </div> 32 <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script> 33 <script> 34 var a_left = false; //先声明4个变量等于false 35 var a_right = false; 36 var b_left = false; 37 var b_right = false; 38 $('body').keydown(function(e){ //绑定按下事件 ，按下按键时变量等于true 39 switch(e.keyCode){ 40 case 37: 41 a_left = true; 42 console.log('左按下'); 43 break; 44 case 39: 45 a_right = true; 46 console.log('右按下'); 47 break; 48 case 65: 49 b_left = true; 50 console.log('A按下'); 51 break; 52 case 68: 53 b_right = true; 54 console.log('D按下'); 55 break; 56 } 57 }); 58 $('body').keyup(function(e){ //绑定抬起事件，按键抬起时变量等于false 59 switch(e.keyCode){ 60 case 37: 61 a_left = false; 62 console.log('左抬起'); 63 break; 64 case 39: 65 a_right = false; 66 console.log('右抬起'); 67 break; 68 case 65: 69 b_left = false; 70 console.log('A抬起'); 71 break; 72 case 68: 73 b_right = false; 74 console.log('D抬起'); 75 break; 76 } 77 }); 78 79 //然后开启一个定时器，不停的判断4个全局变量现在的状态。 80 //比如A按键按下，变量即等于true，这时再按键左按键变量也是等于true的，所以并不会起到冲突 81 //可实现同时触发两个按键事件 82 setInterval(function(){ 83 if(a_left){ 84 $('.demo1').css('left','-=5'); 85 } 86 if(a_right){ 87 $('.demo1').css('left','+=5'); 88 } 89 if(b_left){ 90 $('.demo2').css('left','-=5'); 91 } 92 if(b_right){ 93 $('.demo2').css('left','+=5'); 94 } 95 },5) 96 </script> 97 </body> 98 </html>
谢谢观看，如有不足请指教！ 谢谢观看，如有不足请指教！谢谢观看，如有不足请指教！