jQuery同时监听两个事件---实现同时操控两个按键

最新推荐文章于 2021-11-10 10:41:20 发布

weixin_30780221

最新推荐文章于 2021-11-10 10:41:20 发布

阅读量224

点赞数

原文链接：http://www.cnblogs.com/yangpeixian/p/10943182.html

版权

我们都知道因为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>

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

转载于:https://www.cnblogs.com/yangpeixian/p/10943182.html

weixin_30780221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery同时监听两个事件---实现同时操控两个按键

我们都知道因为js是单线程的，所以没有可以同时触发键盘两个事件的方法今天我们就来做一个可以实现这个功能方法先来看一下成品图效果接下来我们来看下具体是怎么实现的注释写在了代码里面 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta char...
复制链接

扫一扫