键盘事件及阻止默认事件
1.键盘事件
/* 键盘事件 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移动(及解决卡顿问题)
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.取消默认事件
自定义右键菜单
/* 阻止默认事件 分析当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用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"; }