鼠标事件
鼠标事件的种类
鼠标事件指与鼠标相关的事件,继承了MouseEvent接口。
click
:按下鼠标(通常是按下主按钮)时触发。
dblclick
:在同一个元素上双击鼠标时触发。
mousemove
:当鼠标在一个节点内部移动时触发。当鼠标持续移动时,该事件会连续触发。
contextmenu
:按下鼠标右键时(上下文菜单出现前)触发,或者按下“上下文菜单键”时触发。
……
MouseEvent 接口概述
MouseEvent
接口代表了鼠标相关的事件,单击(click
)、双击(dblclick
)等动作,所产生的事件对象都是MouseEvent
实例。
此外,滚轮事件和拖拉事件也是MouseEvent
实例。
MouseEvent
接口继承了Event
接口,所以拥有Event
的所有属性和方法。它还有自己的属性和方法。
可以使用console.log
打印出可选参数
document.onclick=function (ev){
console.log(ev);
}
screenX
:数值,鼠标相对于屏幕的水平位置(单位像素),默认值为0,设置该属性不会移动鼠标。
screenY
:数值,鼠标相对于屏幕的垂直位置(单位像素),其他与screenX相同。
clientX
:数值,鼠标相对于程序窗口的水平位置(单位像素),默认值为0,设置该属性不会移动鼠标。
clientY
:数值,鼠标相对于程序窗口的垂直位置(单位像素),其他与clientX相同。
ctrlKey
:布尔值,是否同时按下了 Ctrl 键,默认值为false。
shiftKey
:布尔值,是否同时按下了 Shift 键,默认值为false。
altKey
:布尔值,是否同时按下 Alt 键,默认值为false。
metaKey
:布尔值,是否同时按下 Meta 键,默认值为false。
button
:数值,表示按下了哪一个鼠标按键,默认值为0,表示按下主键(通常是鼠标的左键)或者当前事件没有定义这个属性;1表示按下辅助键(通常是鼠标的中间键),2表示按下次要键(通常是鼠标的右键)。
buttons
:数值,表示按下了鼠标的哪些键,是一个三个比特位的二进制值,默认为0(没有按下任何键)。1(二进制001)表示按下主键(通常是左键),2(二进制010)表示按下次要键(通常是右键),4(二进制100)表示按下辅助键(通常是中间键)。因此,如果返回3(二进制011)就表示同时按下了左键和右键。
relatedTarget
:节点对象,表示事件的相关节点,默认为null。
……
坐标兼容情况:
高级游览器:
clientX / clientY
layerX / layerY X 不兼容
movementX / movementY X 不兼容
offsetX / offsetY 相对于被点击元素的坐标
pageX / pageY X 不兼容(但高级游览器可以使用)
screenX / screenY
X / Y X 不要用,虽然它在高级游览器里是client的缩写,但ie里不认
pageX / pageY 在整个页面里的坐标
ie里:
clientX / clientY 相对于可视化区域坐标 -- 实用
offsetX / offsetY 相对于被点击元素的坐标
screenX / screenY 相对于屏幕的坐标 -- 不实用
X / Y X ie里它是offset的缩写
-----------------------------------------------------
实际可用:
clientX / clientY 相对于可视化区域坐标
offsetX / offsetY 相对于被点击元素的坐标
pageX / pageY => clientX+scrollleft(兼容写法) 在整个页面里的坐标
-----------------------------------------------------
兼容性
为了兼容各种浏览器,因为有的浏览器可能对象是用ev
表示的,有的则是event
表示的,为了避免有的浏览器获取出现undefine
,所以要用兼容方法来避免。
// if处理兼容
document.onclick=function (ev){
// 打印ev
document.getElementById('s1').innerHTML=ev;
if (ev){
// 游览器支持ev时就显示if里的
document.getElementById('s1').innerHTML=ev.clientX+','+ev.clientY;
}else{
//不支持就显示else里的
document.getElementById('s1').innerHTML=event.clientX+','+event.clientY;
}
}
// 简化写法
document.onclick=function (ev){
//变量名不一定是ev,oEevent或者其他的都行
ev=ev||event;
// 使用或运算,当游览器支持ev时就直接显示,不支持时就ev赋值event传进去
//然后都使用ev;
document.getElementById('s1').innerHTML=ev.clientX+','+ev.clientY;
}
用法:
document.onclick=function (ev){
// console.log(ev);
ev=ev||event;
console.log(ev.offsetX,ev.clientY);
}
page兼容写法:
document.onclick=function (ev){
// console.log(ev);
ev=ev||event;
// document.documentElement.scrollTop可兼容至ie7
//如果ie7一下的游览器还想兼容的话,可以使用document.body.scrollTop
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
// alert(ev.pageY);
// ie低版本得自己去加
alert(ev.clientY+scrollTop);
//ev.clientY+scrollTop和 ev.pageY 获取出来的是一样的
console.log(ev.clientY+scrollTop==ev.pageY);
}
方块跟随鼠标移动demo
document.onmousemove=function (ev){
ev=ev||event;
oDiv.style.left=ev.clientX+'px';
oDiv.style.top=ev.clientY+'px';
};
方块跟随鼠标移动demo在线演示
键盘事件
键盘事件的种类
键盘事件由用户击打键盘触发,主要有keydown
、keypress
、keyup
三个事件,它们都继承了KeyboardEvent
接口。
keydown
:按下键盘时触发。(按住一个键 – down会重复触发
keypress
:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown事件,再触发这个事件。
keyup
:松开键盘时触发该事件。
如果用户一直按键不松开,就会连续触发键盘事件,触发的顺序如下。
keydown
keypress
keydown
keypress
...(重复以上过程)
keyup
KeyboardEvent 接口概述
KeyboardEvent
接口用来描述用户与键盘的互动。这个接口继承了Event
接口,并且定义了自己的实例属性和实例方法。
可以使用console.log
打印出可选参数
document.onkeydown=function (ev){
console.log(ev);
}
//打印按键所在数字
document.onkeydown=function (ev){
console.log(ev.keyCode);
}
keyCode
:字符串,当前按下的键,默认为空字符串。
code
:字符串,表示当前按下的键的字符串形式,默认为空字符串。
location
:整数,当前按下的键的位置,默认为0。
ctrlKey
:布尔值,是否按下 Ctrl 键,默认为false。
shiftKey
:布尔值,是否按下 Shift 键,默认为false。
altKey
:布尔值,是否按下 Alt 键,默认为false。
……
兼容情况:
================================
code 以文本的形式显示按下的键 ※只兼容chrome
================================
Code :
下面是一些常用键的字符串形式,其他键请查文档或自行打印
数字键0 - 9:返回digital0 - digital9
字母键A - z:返回KeyA - KeyZ
功能键F1 - F12:返回 F1 - F12
方向键:返回ArrowDown、ArrowUp、ArrowLeft、ArrowRight
Alt 键:返回AltLeft或AltRight
Shift 键:返回ShiftLeft或ShiftRight
Ctrl 键:返回ControlLeft或ControlRight
================================
完全兼容的就这几个
ctrlKey/altKey/shiftKey 按键同时,组合键是否按下
keyCode 用数字表示按键
================================
keyCode :
下面是一些常用键的数字形式,其他键请查文档或自行打印
F1 ~ F12 => 112 ~ 123
A ~ Z => 65 ~ 90
0 =>48
1 ~ 9 => 49~57
↑ → ↓ ← => 38 39 40 41
shift => 16
ctrl => 17
atl => 18
......
键盘控制方块移动demo
<style>
.box {
width: 200px;
height: 200px;
background: lightpink;
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="box"></div>
const arrowLeft=37,arrowUp=38,arrowRight=39,arrowDown=40,ctrlKey=17;
let oDiv=document.getElementsByClassName('box')[0];
const speed=5;
const speed2=20;
let right=false;
let left=false;
let up=false;
let down=false;
let ctrl=false;
document.onkeydown=function (ev){
switch (ev.keyCode){
case arrowLeft:
left=true;
break;
case arrowUp:
up=true;
break;
case arrowRight:
right=true;
break;
case arrowDown:
down=true;
break;
case ctrlKey:
// 按住ctrl后ctrl就变为true
ctrl=true;
break;
}
}
document.onkeyup=function (ev){
switch (ev.keyCode){
case arrowLeft:
left=false;
break;
case arrowUp:
up=false;
break;
case arrowRight:
right=false;
break;
case arrowDown:
down=false;
break;
case ctrlKey:
ctrl=false;
break;
}
}
setInterval(function (){
// 三目判断,如果按住了ctrl,就写入speed2的速度,反之就是speed
let s=ctrl?speed2:speed;
if (right) oDiv.style.left=oDiv.offsetLeft+s+'px';
if (left) oDiv.style.left=oDiv.offsetLeft-s+'px';
if (up) oDiv.style.top=oDiv.offsetTop-s+'px';
if (down) oDiv.style.top=oDiv.offsetTop+s+'px';
},16)
冷知识:当if语句只有一句时,花括号可以省略,并且换不换行都行
键盘控制方块移动demo在线演示