键盘事件及阻止默认事件

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

  

  

  

posted @   carol72  阅读(2369)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示