js 之三 鼠标和键盘事件处理
鼠标和键盘事件
鼠标常见的事件，按下onmousedown，拖动onmounsemove，松开onmousevtup，滚轮等事件；
开发需求： 当鼠标点击控件，进行拖拽，控件跟随鼠标移动；
拖拽事件需求的实现思路分析：
1 首先鼠标选中对象，然后拖动按下鼠标时，触发事件onmousedown;
2 当鼠标移动的时候，被拖车元素跟鼠标移动onmounsemove，改事件在onmousedown中；
获取事件对象坐标；然后赋值给对象的坐标，进行移动；
var left=event.clientX-ol;
var top=event.clientY-al;
obj.style.left=left+"px";
obj.style.top=top+"px";
当鼠标松开是，被拖车元素固定在当前位置onmousevtup
触发事件；释放移动和按下的事件
domcument.onmounsemove=null
domcument.onmounsedown=null
代码如下：
function move (obj){
obj.onmousedown=function (event){
event=event || window.event
// if (obj.setPointerCapture){
// obj.setPointerCapture();}
//事件对象位置减去对象的位置
var ol= event.clientX-obj.offsetLeft
var al=event.clientY-obj.offsetTop
//然后执行移动事件对象，必须是document事件
document.onmousemove=function (event){
//浏览器兼容性问题
event=event || window.event
// 或者当前坐标
var left=event.clientX-ol;
var top=event.clientY-al;
obj.style.left=left+"px";
obj.style.top=top+"px";
}}
//给document绑定一个松开鼠标的事件
document.onmouseup=function (){
//首先释放document的移动事件
document.onmousemove=null
//并取消document的按键事件
document.onmousedown=null
// obj.releasePointerCapture && obj.releasePointerCapture()
}
//解决问题自动去浏览器进行搜索的问题
return false;
//设置btn01对鼠标的按下相关的事件进行捕获，当调用
}
window.onload=function () {
/*
拖拽事件的实现思路分析： 首先鼠标选中对象，然后拖动按下鼠标时，触发事件；onmousedown;
当鼠标移动的时候，被拖车元素跟鼠标移动onmounsemove
当鼠标松开是，被拖车元素固定在当前位置onmousevtup
*/
box1 = document.getElementById('box1')
box2 = document.getElementById('box2')
//当鼠标正在被拖拽元素按下时，触发onmousedown
move(box1);
move(box2);
}
键盘事件：
onkeydown 键盘按下，onkeyup 键盘松开，键盘事件一般绑定在焦点的对象或者document
1 判断键盘条件经常使用keycode
if(event.keycode===89) 判断键盘是否按下y，当然首先要触发键盘按下事件，然后
<script type="text/javascript">
// 键盘事件
// onkeydown按键被按下，如果一直按着不松手事件会一直触发
// onkeyup按键被松开
// 详见https://www.runoob.com/jsref/dom-obj-event.html
// 键盘事件一般都绑定给一些可获取焦点的对象或者是document
window.onload=function (){
// document.onkeydown=function (event){
// event=event || window.event
// //可以通过keycode 获取编码；
// //altCode;ctrlCode;shiftCode;获取编码
// //
// if (event.keyCode===89)
// {
// console.log("你按的是y")
// }
// //同时按键的判断ctrl+y的判断
// if (event.keyCode===89 && event.ctrlKey){
// console.log("同时按住ctrl+y")
// }
//
// }
var input=document.getElementsByTagName('input')[0]
input.onkeydown=function (event){
event=event || window.event
console.log(event.keyCode)
if (event.keyCode>=96 && event.keyCode<=107){
//不符合条件，回调函数返回false
return false
}
}
}
</script>
</head>
<body>
<input type="text" id="input" value="" />
</body>
</html>
功能开发练习
用键盘上下左右控制div的移动
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: #0a0c0d;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function (){
var box1= document.getElementById('box1')
document.onkeydown=function (event){
//浏览器兼容性问题
event=event||window.event
var speed = 10;
console.log(event.keyCode)
if (event.ctrlKey){
speed=40;
}
switch (event.keyCode){
case 37:
console.log(event.keyCode)
box1.style.left=box1.offsetLeft - speed + "px";
break;
case 38:
console.log(event.keyCode)
box1.style.top=box1.offsetTop - speed + "px";
break;
case 39:
console.log(event.keyCode)
box1.style.left=box1.offsetLeft + speed + "px";
break;
case 40: box1.style.top=box1.offsetTop + speed + "px"; break;
}
}
}
</script>
js 之三 鼠标和键盘事件处理的更多相关文章
- js根据鼠标和键盘判断页面是否长时间未进行操作
<script> var count = 0; var outTime = 1;//分钟 window.setInterval(go, 1000); function go() { cou ...
- js 禁止鼠标和键盘行为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- 【前端】js代码模拟用户键盘鼠标输入
js代码模拟用户键盘鼠标输入 原生js var event = new Event('mousewheel'); event.wheelDelta = 360 document.dispatchEve ...
- 由chrome剪贴板问题研究到了js模拟鼠标键盘事件
写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...
- js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键
js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键 一.总结 一句话总结:event.which属性. 1.如何获取事件发生的时间? timeStamp属性 event.timeStamp 属性 ...
- Qt Quick 事件处理之鼠标、键盘、定时
一.鼠标事件 MouseArea 对象可以附加到一个 item 上供 item 处理鼠标事件,它本身是一个不可见的 item .在其内部,可以直接引用它所附着的对象的属性和方法.你可以将 MouseA ...
- js 鼠标和键盘事件
js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...
- 20个优秀的 JavaScript 键盘事件处理库
键盘事件是 Web 开发中最常用的事件之一,通过对键盘事件的捕获和处理可以提高网站的易用性和交互体验.下面,我们向大家介绍收集的20款优秀的 JavaScript 键盘事件处理库,帮助开发人员轻松处理 ...
- C#键盘事件处理(来源网上)
C#键盘事件处理 如果你希望用户按F1弹出chm帮助,代码如下: private void FrmMain_Load(object sender, EventArgs e) { this.KeyPre ...
随机推荐
- 车企-TSP系统通用架构设计
最近一年用于参与到了新能源车企的管理系统的开发,并且主要从事架构设计与重难点功能开发的工作,因此有了一些小心得,特此记录(PS:整体和甲方在需求上扯皮,以及协调所有供应商这些项目管理上的事情比做开发耗 ...
- 小知识：SQL Monitor Report的使用
在上一篇 优化利器In-Memory开启和效果 中,提到的两个SQL对比,使用的是传统的dbms_xplan.display_cursor方式来查看执行计划,好处是文本输出的通用性强,基本信息也都有. ...
- monggodb项目操作
1.回顾 1.express + node 1.1 准备工作 前后端不分离开发 --- 前端负责写页面,后端负责渲染 --- admin-lte 1.2 创建express项目 express mya ...
- 移动端网页--better-scroll容易采坑合集
移动端网页--better-scroll容易采坑合集 一.better-scroll源码bug,浏览器需要刷新一次才能正常滑动 在new BScroll时,在options中加入 mouseWheel ...
- Flask快速入门day 01（flask介绍、快速使用、配置文件、路由系统）
目录 Flask框架 前言: 一.flask介绍 1.介绍 2.使用两种协议编写web 二.flask快速使用 1.快速使用: 2.使用flask编写登录小案例 2.1 login.html 2.2 ...
- IOC创建对象方式
IOC创建对象方式 User 类 public class User { private String name; public User(String name) { ...
- 配置了一台3700X电脑后
众所周知,电脑是生活中必不可少的玩具,最近搞了一套配置.CPU3700X,显卡RX580,内存32GB.敲,这CPU的框框,看见就爽的不得了. As we all know, a comput ...
- Go 语言切片是如何扩容的？
原文链接: Go 语言切片是如何扩容的? 在 Go 语言中,有一个很常用的数据结构,那就是切片(Slice). 切片是一个拥有相同类型元素的可变长度的序列,它是基于数组类型做的一层封装.它非常灵活,支 ...
- Linux（四）软件包管理
软件包管理 1 RPM 简介 RPM(RedHat Package Manager),是红帽系linux操作系统的软件包管理工具,类似于windows中的setup.exe能够进行软件包的更新.卸载. ...
- STM32启动分析之main函数是怎样跑起来的
1.MDK目标文件 1)MDK中C程序编译后的结果,即可执行文件数据分类: RAM ZI bss 存储未初始化的或初始化为0的全局变量和静态变量 heap 堆,系统malloc和free操作的内存 s ...