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 ...
随机推荐
- Vue模板语法 && 数据绑定
模板语法 Vue模板语法包括两大类 插值语法 功能:用于解析标签体内容. 写法:{{xxx}},xxx是js表达式,可以直接读取倒data中所有区域. 指令语法 功能:用于解析标签(包括:标签属性.标 ...
- 第一章C语言概述
1.1程序实例 //first.程序 #include <stdio.h> int main() { int num; num = 1; printf("I am a simpl ...
- DVWA-XSS(DOM)
漏洞详解. DOM XSS(Cross-site scripting)是一种Web安全漏洞,它利用了浏览器的DOM(文档对象模型)解析机制,通过注入恶意代码来攻击用户. DOM XSS与传统的反射型或 ...
- day10-SpringBoot的异常处理
SpringBoot异常处理 1.基本介绍 默认情况下,SpringBoot提供/error处理所有错误的映射,也就是说当出现错误时,SpringBoot底层会请求转发到/error这个映射路径所关联 ...
- forEach如何终止循环
try { try { this.list.forEach(item => { ..... throw new Error('end') }) } catch(err) { console.lo ...
- 微软开源了一个 助力开发LLM 加持的应用的 工具包 semantic-kernel
在首席执行官萨蒂亚·纳德拉(Satya Nadella)的支持下,微软似乎正在迅速转变为一家以人工智能为中心的公司.最近微软的众多产品线都采用GPT-4加持,从Microsoft 365等商业产品到& ...
- Auto Photoshop StableDiffusion - 这是一款可以在 Photoshop 中使用 AI 智能 Automatic1111 进行插画、海报等设计的插件
简介 Auto Photoshop StableDiffusion - 这是一款可以在 Photoshop 中使用 AI 智能 Automatic1111 进行插画.海报等设计的插件,此插件可以是你在 ...
- 涉及面试题：有几种方式可以实现存储功能，分别有什么优缺点？什么是 Service Worker ？
cookie,localStorage,sessionStorage,indexDB 特性 cookie localStorage sessionStorage indexDB 数据生命周期 一般由服 ...
- selenium验证码处理-打码平台操作
1.进入打码平台(超人,斐斐) 斐斐-------官网: 超人-------官网: 2.选择对应的开发文档,下载对应的demo示例,并把demo的python脚本放到项目包管理地址去 参考: 超人的开 ...
- kubernetes（k8s） 中安装kuboard面板
kubernetes(k8s) 中安装kuboard面板 01 - 背景及安装 Kuboard 是一款专为 Kubernetes 设计的免费管理界面,兼容 Kubernetes 版本 1.13 及以上 ...