我們都知道因為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 width: 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>
謝謝觀看，如有不足請指教！ 謝謝觀看，如有不足請指教！謝謝觀看，如有不足請指教！