鼠标键盘事件对象常用属性

Posted 2023-05-06

参考技术A 一、clientX、clientY
点击位置距离当前body可视区域的x，y坐标

二、pageX、pageY
对于整个页面来说，包括了被卷去的body部分的长度

三、screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标

四、offsetX、offsetY
相对于带有定位的父盒子的x，y坐标

五、x、y
和screenX、screenY一样

event.code：当前按键名称（键盘按键类型 + 按键名称）
event.key：当前按键名称（只有按键名称）
event.which / event.keyCode：当前按键的键盘码

jQuery的Event对象(实例)。

which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮。

对于键盘和鼠标事件，该属性用于确定你按下的是哪一个键盘按键或鼠标按钮。

which属性对DOM原生的event.keyCode和event.charCode进行了标准化。

适用的事件类型主要有键盘事件：keypress、keydown、keyup，以及鼠标事件：mouseup、mousedown。

该属性属于jQuery的Event对象(实例)。

jQuery 1.1.3 新增该属性。

eventObject.which

返回值

which属性的返回值是Number类型，返回触发当前事件时按下的键盘按键或鼠标按钮。

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

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

在keypress事件中，event.which属性返回的是输入的字符的Unicode值(相当于event.charCode)。以下是常用的字符Unicode代码对应表。更多字符的Unicode代码，请参见完整的ASCII编码表(Unicode兼容ASCII)。

 

which属性值(或范围)	对应的输入字符
48 - 57	对应字符 0 - 9
65 - 90	对应字符 A - Z
97 - 122	对应字符 a - z

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

 

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

<div id="msg"></div>

与event.which属性相关的jQuery示例代码如下(其中表单验证部分的代码仅作简单的非空验证)：

// 为当前文档绑定keydown和mousedown两种事件
// 检测鼠标按下了那些键
// 检测键盘按下了那些字母按键
$(document).bind("keydown mousedown", function(event){
    var msg = ‘‘;
    if( event.type == "mousedown" ){ // 鼠标按下事件
        var map = {"1": "左", "2":"中", "3":"右"};
        msg = ‘你按下了鼠标[‘ + map[event.which] + ‘]键‘;
    }else{ // 键盘按下事件
        if(event.which >= 65 && event.which <= 90){
            msg = ‘你按下了键盘[‘ + String.fromCharCode(event.which) + ‘]键‘;
        }
    }
    if(msg){
        $("#msg").prepend( msg + ‘<br>‘);
    }
});

 

$(function(){
            $("body").keydown(function(event){
                if(event.which == 13){
                    $("#frm").submit();
                }
            })
        })