欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键

发布时间：2025/6/17 编程问答 42 豆豆
生活随笔 收集整理的这篇文章主要介绍了 js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键

一、总结

一句话总结：event.which属性。

 

1、如何获取事件发生的时间？

timeStamp属性

event.timeStamp 属性用于返回当前事件触发的时间值。这个时间值是距离1970年1月1日的毫秒数。

 

2、为什么推荐用 event.which 来监视键盘输入？

event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。

 

3、鼠标的三个键对应的键值是什么？

1 2 3

event.which属性值对应的鼠标按钮
1鼠标左键2鼠标中键(滚轮键)3鼠标右键

4、0-9a-zA-Z对应的键值是什么？

他们对应的ascii码

 

5、非jQuery封装获取ctrl，alt，shift的键是什么？

 

35 //回顾一下altKey/shiftKey/ctrlKey(非jQuery封装) 36 $(document).mousedown(function(e){ 37 alert(e.shiftKey) 38 })

 

 

6、jquery的event对象中包含js的event的原生的方法么？

包含的，只不过对有一些进行了封装，因为jquery里面是完全可以执行js的，所以js原生方法属性都可以用

 

二、如何知道鼠标和键盘当前操作的是哪个键

1、相关知识

event.timeStamp 属性用于返回当前事件触发的时间值。这个时间值是距离1970年1月1日的毫秒数。

event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。

event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。

在mousedownmouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值(相当于event.button)。以下是主要的鼠标按钮映射代码对应表。

event.which属性值对应的鼠标按钮
1鼠标左键
2鼠标中键(滚轮键)
3鼠标右键

在keydownkeyup事件中，event.which属性返回的是对应按键的映射代码值(相当于event.keyCode)。以下是常用的键盘按键映射代码的对应表：

which属性值(或范围)对应的输入字符
48 - 57对应字符 0 - 9
65 - 90对应字符 A - Z
97 - 122对应字符 a - z
which属性值(或范围)对应的键盘按键
8Backspace键
9Tab键
13Enter键
16Shift键
17Ctrl键
20Alt键
20Caps Lock键(大小写锁定)
27Esc键
33 - 36对应按键 PageUp、PageDown、End、Home
37 - 40对应按键 左、上、右、下(方向键)
45 - 46对应按键 Insert、Delete
48 - 57对应按键 0 - 9(非小键盘)
65 - 90对应按键 A - Z
91Windows键
96 - 105对应按键 0 - 9(小键盘)
106、107、109、110、111对应按键*、+、-、.、/(小键盘)
112 - 123对应按键 F1 - F12

 

2、代码

1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style type="text/css"> 10 input{width: 100px;height: 30px;} 11 div{width: 100px;height: 100px;border:1px solid green;} 12 </style> 13 </style> 14 </head> 15 <body> 16 <h3>jQuery事件对象</h3> 17 <div id="div1"><p id="pid"></p></div> 18 <input id="btn1" type="button" value="事件对象"> 19 <script type="text/javascript"> 20 $(function(){ 21 $(document).click(function(e){ 22 alert(e.timeStamp) 23 var time=new Date(e.timeStamp) 24 alert(time.toLocaleString()) 25 }) 26 27 $(document).mousedown(function(e){ 28 alert(e.which) 29 }) 30 31 $(document).keydown(function(e){ 32 alert(e.which) 33 }) 34 35 //回顾一下altKey/shiftKey/ctrlKey(非jQuery封装) 36 $(document).mousedown(function(e){ 37 alert(e.shiftKey) 38 }) 39 }) 40 </script> 41 </body> 42 </html>

 

 

总结

以上是生活随笔为你收集整理的js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。