JS常用的鼠标、键盘事件

常用的鼠标事件

鼠标事件 触发条件
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

猜你喜欢

转载自blog.csdn.net/Guoxuxinwen/article/details/104615858
今日推荐