键盘多按键事件 移动的小方块
作者：互联网
// 键盘多按键事件
// 在定义事件处理函数时,如果定义一个形参,JavaScript程序会自动向这个形参存储数据
// 形参中存储的是事件对象的相关数据信息
// 触发事件的对象,键盘事件,就是触发事件的按键,相关信息
// 一般 事件对象 形参名称为 event 或者 e
// 解决兼容问题:低版本IE,存储事件对象的语法,不是在事件处理函数中定义形参 // 低版本IE存储事件对象方式 : window.event
// 如果是 不兼容的语法,执行结果是 undefined
// 说明: 最新高版本 谷歌火狐等浏览器也兼容 window.event 语法 // 实际面试时,会问兼容写法 // 已经有定义的形参 e 可以直接对形参e进行赋值,不用再新定义变量 // 如果 e 有存储内容,就赋值本身存储的内容 // 如果 e 没有存储内容,结果是undefined,赋值 window.event 内容
// 重要内容 // key 按键名称 -- 会有按键相同重复 // keyCode 键盘按键编码 // 低版本的火狐浏览器,不支持keyCode // 使用的是 which,为了兼容低版本火狐浏览器,也要使用兼容语法 // var keyCode = e.keyCode || e.which // 高版本的火狐浏浏览器可以直接使用 e.keyCode
// altKey ctrlKey shiftKey 判断是否按下 alt ctrl shift 键 // 按下是 true 没有按下是 false // 可以通过这三个属性,判断多按键
document.onkeydown = function(e){ // 兼容事件对象 e = e || window.event; // console.log(e); // 兼容获取按键编码 var keyCode = e.keyCode || e.which;
// 判断按键是否是 alt + ctrl + j (74) if (e.altKey && e.ctrlKey && keyCode === 74){ console.log('三个按键都按下') }
} <style> * { margin: 0; padding: 0; }
div { width: 100px; height: 100px; background: pink; position: fixed; top: 0; left: 0; } </style> </head>
<body> <div></div>
<script> var oDiv = document.querySelector('div');
// 虽然要控制div,但是键盘按下事件,只能加载给document对象 document.onkeydown = function (e) { // 需要先获取标签定位的原始数据 // 数值的修改,是在原始数值基础上的修改 var left; var top;
// 通过兼容语法,获取标签的原始数据 if (window.getComputedStyle) { left = window.getComputedStyle(oDiv).left; top = window.getComputedStyle(oDiv).top; } else { left = oDiv.currentStyle.left; top = oDiv.currentStyle.top; }
// 执行结果是 left 和 top 有 px单位,要执行计算时,要去除px单位 left = parseInt(left); top = parseInt(top);
// 1,兼容事件对象 e = e || window.event;
// 2,兼容按键编码 var keyCode = e.keyCode || e.which;
// 3,判断按键 左37 上38 右39 下40
// if判断 和 switch判断 都可以 switch更好
/* if(keyCode === 38){ // 如果上按键,给 top 数值 -= 一个固定数值 top -= 10; // 将新的数据数值,赋值给标签对象,必须要有px单位 oDiv.style.top = top + 'px'; }else if(keyCode === 40){ // 如果下按键,给 top 数值 += 一个固定数值 top += 10; // 将新的数据数值,赋值给标签对象,必须要有px单位 oDiv.style.top = top + 'px'; }else if(keyCode === 37){ // 如果左按键,给 left 数值 -= 一个固定数值 left -= 10; // 将新的数据数值,赋值给标签对象,必须要有px单位 oDiv.style.left = left + 'px'; }else if(keyCode === 39){ // 如果左按键,给 left 数值 == 一个固定数值 left += 10; // 将新的数据数值,赋值给标签对象,必须要有px单位 oDiv.style.left = left + 'px'; } */
// 第二种if判断 if (keyCode === 38 || keyCode === 40) { // 上或者下 if (keyCode === 38) { // 上 top -= 10; } else { // 下 top += 10; } oDiv.style.top = top + 'px'; } else if (keyCode === 37 || keyCode === 39) { // 左或者右 if (keyCode === 37) { // 左 left -= 10; } else { // 有 left += 10; } oDiv.style.left = `${left}px`; }
}
// 总结 // 1,思路: // 获取标签的原始数据信息 定位数值 // 给document添加键盘按下事件 // 获取按键keyCode,判断是哪个按键 // 根据不同的按键,给定位属性修改属性值, += -= // 最后将新的属性值,赋值给标签,作为定位的数据 // 2,问题: // 兼容处理: // 事件对象e兼容 // keyCode兼容 // 获取标签执行样式兼容处理 // 获取的样式,是否带有px单位 // 带有单位的字符串,没有把办法直接执行 算术运算符 // 赋值给标签时,注意要带上px单位 // 所有的大小数据,赋值时,都要带有px单位 // 数值要对应按键,千万别记错了 // 左移 left- 右移left+ 上移 top- 下移 top+
// 解决兼容问题:低版本IE,存储事件对象的语法,不是在事件处理函数中定义形参 // 低版本IE存储事件对象方式 : window.event
// 如果是 不兼容的语法,执行结果是 undefined
// 说明: 最新高版本 谷歌火狐等浏览器也兼容 window.event 语法 // 实际面试时,会问兼容写法 // 已经有定义的形参 e 可以直接对形参e进行赋值,不用再新定义变量 // 如果 e 有存储内容,就赋值本身存储的内容 // 如果 e 没有存储内容,结果是undefined,赋值 window.event 内容
// 重要内容 // key 按键名称 -- 会有按键相同重复 // keyCode 键盘按键编码 // 低版本的火狐浏览器,不支持keyCode // 使用的是 which,为了兼容低版本火狐浏览器,也要使用兼容语法 // var keyCode = e.keyCode || e.which // 高版本的火狐浏浏览器可以直接使用 e.keyCode
// altKey ctrlKey shiftKey 判断是否按下 alt ctrl shift 键 // 按下是 true 没有按下是 false // 可以通过这三个属性,判断多按键
document.onkeydown = function(e){ // 兼容事件对象 e = e || window.event; // console.log(e); // 兼容获取按键编码 var keyCode = e.keyCode || e.which;
// 判断按键是否是 alt + ctrl + j (74) if (e.altKey && e.ctrlKey && keyCode === 74){ console.log('三个按键都按下') }
} <style> * { margin: 0; padding: 0; }
div { width: 100px; height: 100px; background: pink; position: fixed; top: 0; left: 0; } </style> </head>
<body> <div></div>
<script> var oDiv = document.querySelector('div');
// 虽然要控制div,但是键盘按下事件,只能加载给document对象 document.onkeydown = function (e) { // 需要先获取标签定位的原始数据 // 数值的修改,是在原始数值基础上的修改 var left; var top;
// 通过兼容语法,获取标签的原始数据 if (window.getComputedStyle) { left = window.getComputedStyle(oDiv).left; top = window.getComputedStyle(oDiv).top; } else { left = oDiv.currentStyle.left; top = oDiv.currentStyle.top; }
// 执行结果是 left 和 top 有 px单位,要执行计算时,要去除px单位 left = parseInt(left); top = parseInt(top);
// 1,兼容事件对象 e = e || window.event;
// 2,兼容按键编码 var keyCode = e.keyCode || e.which;
// 3,判断按键 左37 上38 右39 下40
// if判断 和 switch判断 都可以 switch更好
/* if(keyCode === 38){ // 如果上按键,给 top 数值 -= 一个固定数值 top -= 10; // 将新的数据数值,赋值给标签对象,必须要有px单位 oDiv.style.top = top + 'px'; }else if(keyCode === 40){ // 如果下按键,给 top 数值 += 一个固定数值 top += 10; // 将新的数据数值,赋值给标签对象,必须要有px单位 oDiv.style.top = top + 'px'; }else if(keyCode === 37){ // 如果左按键,给 left 数值 -= 一个固定数值 left -= 10; // 将新的数据数值,赋值给标签对象,必须要有px单位 oDiv.style.left = left + 'px'; }else if(keyCode === 39){ // 如果左按键,给 left 数值 == 一个固定数值 left += 10; // 将新的数据数值,赋值给标签对象,必须要有px单位 oDiv.style.left = left + 'px'; } */
// 第二种if判断 if (keyCode === 38 || keyCode === 40) { // 上或者下 if (keyCode === 38) { // 上 top -= 10; } else { // 下 top += 10; } oDiv.style.top = top + 'px'; } else if (keyCode === 37 || keyCode === 39) { // 左或者右 if (keyCode === 37) { // 左 left -= 10; } else { // 有 left += 10; } oDiv.style.left = `${left}px`; }
}
// 总结 // 1,思路: // 获取标签的原始数据信息 定位数值 // 给document添加键盘按下事件 // 获取按键keyCode,判断是哪个按键 // 根据不同的按键,给定位属性修改属性值, += -= // 最后将新的属性值,赋值给标签,作为定位的数据 // 2,问题: // 兼容处理: // 事件对象e兼容 // keyCode兼容 // 获取标签执行样式兼容处理 // 获取的样式,是否带有px单位 // 带有单位的字符串,没有把办法直接执行 算术运算符 // 赋值给标签时,注意要带上px单位 // 所有的大小数据,赋值时,都要带有px单位 // 数值要对应按键,千万别记错了 // 左移 left- 右移left+ 上移 top- 下移 top+
标签：小方块,top,兼容,键盘,按键,px,keyCode,left 来源： https://www.cnblogs.com/ht955/p/14077171.html