带你了解JavaScript中的键盘、鼠标事件( 二 ) _生活百科

文章插图

代码实现
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>显示鼠标单击位置</title> <style> .mouse{position:absolute;background:#ffd965;width:40px;height:40px;border-radius:20px;} </style> </head> <body> <p id="mouse" class="mouse"></p> <script> var mouse = document.getElementById('mouse'); //需求：鼠标在页面上单击时，获取单击时的位置，并显示一个小圆点 document.onclick = function(event) { // 获取事件对象的兼容处理 var event = event || window.event; // 鼠标在页面上的位置 var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft; var pageY = event.pageY || event.clientY + document.documentElement.scrollTop; // 计算<p>应该显示的位置 var targetX = pageX - mouse.offsetWidth / 2; var targetY = pageY - mouse.offsetHeight / 2; // 在鼠标单击的位置显示<p> mouse.style.display = 'block'; mouse.style.left = targetX + 'px'; mouse.style.top = targetY + 'px'; }; </script> </body> </html>【案例】鼠标拖曳特效

文章插图

盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。
举个例子

文章插图

代码实现思路：
① 编写HTML ，设计弹框用于实现拖拽特效。
② 为拖拽条添加mousedown事件及其处理程序。
③ 处理鼠标移动事件，实现鼠标的拖拽的特效。
④ 处理释放鼠标按键的事件，实现鼠标按钮松开后，弹框不再移动。
代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标拖动</title> <style> body{margin:0} .box{width:400px;height:300px;border:5px solid #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;left:30%} .hd{width:100%;height:25px;background-color:#7c9299;border-bottom:1px solid #369;line-height:25px;color:#fff;cursor:move} #box_close{float:right;cursor:pointer} </style> </head> <body> <p id="box" class="box"> <p id="drop" class="hd"> 注册信息 (可以拖拽) <span id="box_close">【关闭】</span> </p> <p class="bd"></p> </p> <script> // 获取被拖动的盒子和拖动条 var box = document.getElementById('box'); var drop = document.getElementById('drop'); drop.onmousedown = function(event) { // 鼠标在拖动条上按下可拖动盒子 var event = event || window.event; // 获取鼠标按下时的位置 var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft; var pageY = event.pageY || event.clientY + document.documentElement.scrollTop; // 计算鼠标按下的位置距盒子的位置 var spaceX = pageX - box.offsetLeft; var spaceY = pageY - box.offsetTop; document.onmousemove = function(event) { // 鼠标移动的时候获取鼠标的位置整个盒子跟着鼠标的位置走 var event = event || window.event; // 获取移动后鼠标的位置 var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft; var pageY = event.pageY || event.clientY + document.documentElement.scrollTop; // 计算并设置盒子移动后的位置 box.style.left = pageX - spaceX + 'px'; box.style.top = pageY - spaceY + 'px'; }; }; document.onmouseup = function() {// 释放鼠标按键时取消盒子的移动 document.onmousemove = null; }; </script> </body> </html>

键盘事件

键盘事件是指用户在使用键盘时触发的事件。
例如，用户按Esc键关闭打开的状态栏，按Enter键直接完成光标的上下切换等。

文章插图

下面以Enter键切换的使用进行演示。具体如例所示。

文章插图

代码实现
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>按Enter键切换</title> </head> <body> <p>用户姓名：<input type="text"></p> <p>电子邮箱：<input type="text"></p> <p>手机号码：<input type="text"></p> <p>个人描述：<input type="text"></p> <script> var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; ++i) { inputs[i].onkeydown = function(e) { // 获取事件对象的兼容处理 var e = event || window.event; // 判断按下的是不是回车，如果是，让下一个input获取焦点 if (e.keyCode === 13) { // 遍历所有input框，找到当前input的下标 for (var i = 0; i < inputs.length; ++i) { if (inputs[i] === this) { // 计算下一个input元素的下标 var index = i + 1 >= inputs.length ? 0 : i + 1; break; } } // 如果下一个input还是文本框，则获取键盘焦点 if (inputs[index].type === 'text') { inputs[index].focus(); // 触发focus事件 } } }; } </script> </body> </html>