键盘事件及阻止默认事件
1.键盘事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* 键盘事件 onkeydown:当键盘按键按下的时候触发 onkeyup:当键盘按键抬起的时候触发 event.keyCode:数字类型 键盘按键的值 键值 ctrlKey,shiftKey,altKey 布尔值 当一个事件发生的时候,如果ctrl或者shift或者alt是按下的状态,返回true,否则返回false; 注意:不是所有元素都能够接收键盘事件,能够响应用户输入的元素,能够接收焦点的元素就能够接收键盘事件 * */ //document.onkeydown=function(ev){ // var ev=ev||event; //// alert(ev.keyCode); //} document.onclick= function (ev){ var ev=ev||event; //点击doucument的时候,当ctrl键按下时弹出true,抬起时弹出false alert(ev.ctrlKey); } |
按键控制div移动(及解决卡顿问题)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | var oDiv=document.getElementById( "div1" ); //创建各个方向条件判断初始变量 var Left= false ; var Right= false ; var Top= false ; var Bottom= false ; //当按键按下时,对应方向的按键条件变为true document.onkeydown= function (ev){ var ev=ev||event; switch (ev.keyCode){ case 38: Top= true ; break ; case 40: Bottom= true ; break ; case 37: Left= true ; break ; case 39: Right= true ; break ; } } //当按键抬起时,对应方向的按键条件变为false document.onkeyup= function (ev){ var ev=ev||event; switch (ev.keyCode){ case 38: Top= false ; break ; case 40: Bottom= false ; break ; case 37: Left= false ; break ; case 39: Right= false ; break ; } } setInterval( function (){ //当其中的一个条件为true时,则执行当前函数 if (Right){ oDiv.style.left=oDiv.offsetLeft+10+ 'px' ; } else if (Left){ oDiv.style.left=oDiv.offsetLeft-10+ 'px' ; } else if (Top){ oDiv.style.top=oDiv.offsetTop-10+ 'px' ; } else if (Bottom){ oDiv.style.top=oDiv.offsetTop+10+ 'px' ; } },50) |
2.取消默认事件
自定义右键菜单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /* 阻止默认事件 分析当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;就可以阻止默认事件 oncontextmenu:右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发 * */ //自定义右键菜单 var oDiv=document.getElementById( "div1" ); //点击右键菜单显示 document.oncontextmenu= function (ev){ var ev=ev||event; //鼠标值 var Left=ev.clientX; var Top=ev.clientY; //菜单根据鼠标的位置定位 oDiv.style.left=Left+ 'px' ; oDiv.style.top=Top+ 'px' ; oDiv.style.display= "block" ; //阻止默认事件 return false ; } //点击document菜单消失 document.onclick= function (){ oDiv.style.display= "none" ; } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步