zoukankan      html  css  js  c++  java
  • 键盘事件及阻止默认事件

    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";
    }
    

      

      

      

  • 相关阅读:
    ceph部署与问题
    openstack常见问题汇总
    css
    html
    zookeeper
    ZAB协议
    快速排序
    Servlet梳理
    tomcat性能优化梳理
    tomcat梳理
  • 原文地址:https://www.cnblogs.com/yangxue72/p/8135698.html
Copyright © 2011-2022 走看看