JavaScript基础 键盘事件 与 onmousedown
2018-03-05 本文已影响0人
0说
onmousedown鼠标按下
左中右键都会触发
document.onmousedown = function (){
console.log( 1 );
}
e.which 返回左中右对应的数字 （不兼容IE8） 主流浏览器 左 1 中 2 右 3
document.onmousedown = function ( e ){
e = e || window.event;
console.log( e.which );
}
e.button 兼容IE8及以下 左 1 中 4 右 2
document.onmousedown = function ( e ){
e = e || window.event;
console.log( e.button );
}
兼容写法
function getButton(e){
var evt = e || window.event;
if(e){
return e.which;
}else{
switch(evt.button){
case 1:
return 1;
case 4:
return 2;
case 2:
return 3;
}
}
}
键盘事件
能获得焦点的元素才有键盘事件 document能获得焦点 div就不能获得
onkeydown 键盘按下时触发 任意键都能触发
onkeypress 键盘按下时触发 只有能键入内容的按键和enter才能触发 （shift、ctrl不能）
onkeyup 键盘抬起时触发
document.onkeydown = function (){
console.log( 111 );//一直按着就一直触发
}
document.onkeyup = function (){
console.log( 222 );
}
键值e.keyCode
<body>
<input id="inp" type="text">
<script>
var oInp = document.getElementById( 'inp' );
oInp.onkeydown = function (e){
e = e || window.event;
console.log( e.keyCode )
}
</script>
Animation.gif
案例
<style>
*{margin:0;padding:0;font-family: Microsoft YaHei,serif;}
li{list-style: none;}
#box{
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
background: #f60;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById( 'box' ),
Left = box.offsetTop,
Top = box.offsetLeft,
speed = 5;
document.onkeydown = function (e){
e = e || window.event;
var keyVal = e.keyCode;
switch ( keyVal ){
case 37: //向左
Left -= speed;
break;
case 38: //向上
Top -= speed;
break;
case 39: //向右
Left += speed;
break;
case 40: //向下
Top += speed;
break;
}
box.style.left = Left + 'px';
box.style.top = Top + 'px';
console.log( e.keyCode )
}
// document.onkeyup = function (){
// console.log( '222' )
// }
</script>
Animation.gif
斜着走
<script>
var box = document.getElementById( 'box' ),
Left = box.offsetTop,
Top = box.offsetLeft,
speed = 1;
document.onkeydown = function (e){
e = e || window.event;
var keyVal = e.keyCode;
switch ( keyVal ){
case 37: //向左
if( box.m37 === undefined ) {
box.m37 = setInterval(function () {//按下时没有抬起时就一直开启定时器，
//当按另一个键时另一个键的定时器也会开启 就会同时移动
Left -= speed;
box.style.left = Left + 'px';
}, 10);
}
break;
case 38: //向上
if( box.m38 === undefined ) {
box.m38 = setInterval(function () {
Top -= speed;
box.style.top = Top + 'px';
}, 10);
}
break;
case 39: //向右
if( box.m39 === undefined ) {
box.m39 = setInterval(function () {
Left += speed;
box.style.left = Left + 'px';
}, 10);
}
break;
case 40: //向下
if( box.m40 === undefined ) {
box.m40 = setInterval(function () {
Top += speed;
box.style.top = Top + 'px';
}, 10);
}
break;
}
}
document.onkeyup = function ( e ){
e = e || window.event;
switch ( e.keyCode ){
case 37:
clearInterval( box.m37 );
box.m37 = undefined;
console.log( box.m37 )
break;
case 38:
clearInterval( box.m38 );
box.m38 = undefined;
break;
case 39:
clearInterval( box.m39 );
box.m39 = undefined;
break;
case 40:
clearInterval( box.m40 );
box.m40 = undefined;
break;
}
}
</script>
Animation.gif
