常用的鼠标事件
鼠标事件 |
触发条件 |
onclick |
鼠标点击左键触发 |
onmouseover |
鼠标经过触发 |
onmouseout |
鼠标离开触发 |
onfocus |
获得鼠标焦点触发 |
onblur |
失去鼠标焦点触发 |
onmousemove |
鼠标移动触发 |
onmouseup |
鼠标弹起触发 |
onmousedown |
鼠标按下触发 |
- 禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
docunment.addEventListener('contextmenu',function(e){
e.preventDefault();
})
- 禁止鼠标选中(不允许复制等)
selectstart开始选中
docunment.addEventListener('selectstart',function(e){
e.preventDefault();
})
常用的鼠标事件对象
event对象代表事件的状态,跟事件相关的一系列信息的集合。
鼠标事件对象 |
说明 |
e.clientX |
返回鼠标相对于浏览器窗口可视区的X坐标 |
e.clientY |
返回鼠标相对于浏览器窗口可视区的Y坐标 |
e.pageX |
返回鼠标相对于文档页面的X坐标 IE9+支持 |
e.pageY |
返回鼠标相对于文档页面的Y坐标 IE9+支持 |
e.screenX |
返回鼠标相对于电脑屏幕的X坐标 |
e.screenY |
返回鼠标相对于电脑屏幕的Y坐标 |
常用键盘事件
键盘事件 |
触发条件 |
onkeyup |
某个键盘按键被松开时触发 |
onkeydown |
某个键盘按键被按下时触发 |
onkeypress |
某个键盘按键被按下时触发 但是它不识别功能键 比如 ctrl shift 箭头等 |
注意:
1.如果使用addEventListener不需要加on
2.onkeypress和前面2个的区别是,它不识别功能键,比如左右箭头,shift等
3.三个事件的执行顺序是:keydown – keypress – keyup