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 ...
随机推荐
- Django-5
Django-5 1.Coookie 1.1 什么是cookie Cookie是储存在浏览器端的一小段文本数据(键值对). 被广泛用于在网站之间传输信息, 当您访问一个网站时,它会将一个Cookie发 ...
- java多线程--2 静态代理、Lambda表达式
java多线程--2 静态代理.Lambda表达式 静态代理 package com.ssl.demo02; //静态代理 //真实对象和代理对象都要实现同一个接口 //代理对象必须要代理真实角色 / ...
- java数组使用、Arrays类使用 、排序方法
数组使用 数组的基本使用: package charpter4; public class ArrayDemo2 { public static void main(String[] args) { ...
- ThreadLocal部分源码分析和应用场景
结构演进 早起JDK版本中,ThreadLocal内部结构是一个Map,线程为key,线程在"线程本地变量"中绑定的值为Value.每一个ThreadLocal实例拥有一个Map实 ...
- 自己动手从零写桌面操作系统GrapeOS系列教程——24.加载并运行loader
学习操作系统原理最好的方法是自己写一个简单的操作系统. 之前我们在电脑的启动过程中介绍过boot程序的主要任务就是加载并运行loader程序,本讲我们就来实现. 本讲代码文件共2个: boot.asm ...
- jQ的工具类方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [CTF学习笔记]net-pack(WinShark)
题目:shark on wire 1 Description We found this packet capture. Recover the flag. 思路 这里懂得了winshark的一些基本 ...
- selenium之文件的上传
文件的上传:主要是两种实现方法: 1.如果定位的元素是type类型是file类型的话,那么直接定位元素并使用send_keys方法完成文件上传 2.如果是非file类型的话,则需要使用第三方工具完成文 ...
- 开源项目audioFlux: 针对音频领域的深度学习工具库
目录 时频变换 频谱重排 倒谱系数 解卷积 谱特征 音乐信息检索 audioFlux是一个Python和C实现的库,提供音频领域系统.全面.多维度的特征提取与组合,结合各种深度学习网络模型,进行音频领 ...
- day134:2RenMJ:TypeScript的抽象类&装饰器&命名空间&模块&编译配置文件&python中的类型注解
目录 1.抽象类 2.装饰器 3.命名空间 4.模块 5.编译配置文件 6.python的类型注解 1.抽象类 抽象类(abstract class)做为其它派生类的基类使用. 它们一般不会直接被实例 ...