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 ...
随机推荐
- Day05笔记
01.数组类(了解) 1.目的:设计一个类,该类有数组的功能,可以存储数据,可以删除修改数据 2.设计核心数据 1.属性:指针(指向堆区空间),数组实际存储的元素个数,数组容量 2.方法:构造(开辟堆 ...
- P7213 [JOISC2020] 最古の遺跡 3 乱写
不想写题解了,把写在草稿纸上的东西整理了一下 感谢 crashed 大佬的题解与对本人问题的回答,没有他我就不会搞懂这道神仙计数题.
- openwrt 刷回梅林或者原厂固件
路由器刷了openwrt固件后,访问不了CFE恢复模式了.本人最近用腾达AC18路由器,刷了AC68U的梅林改版固件.但是后面再用CFE刷了openwrt固件之后,发现wifi不能用,所以又想刷回梅林 ...
- VS2013连接SQLSERVER数据库时显示无法添加数据连接
VS2013连接sqlserver2008时出现如下错误: VS2013添加Microsoft SQL Server数据源时,会遇到无法添加数据连接. Could not load file or a ...
- JetBrains 2022全家桶-激活
## JetBrains 全家桶 激活教程 https://tech.souyunku.com/?page_id=50199
- 迁移学习（DCCL）《Domain Confused Contrastive Learning for Unsupervised Domain Adaptation》
论文信息 论文标题:Domain Confused Contrastive Learning for Unsupervised Domain Adaptation论文作者:Quanyu Long, T ...
- 【ACM算法竞赛日常训练】DAY10题解与分析【月月给华华出题】【华华给月月出题】| 筛法 | 欧拉函数 | 数论
DAY10共2题: 月月给华华出题 华华给月月出题 难度较大. 作者:Eriktse 简介:211计算机在读,现役ACM银牌选手力争以通俗易懂的方式讲解算法!️欢迎关注我,一起交流C++/Python ...
- Java----＞枚举类
自定义的枚举类 package doy1; /** * @author shkstart * @create 2021-10-28 19:23 */ /** * 一.枚举类的使用 * 1.枚举类的理解 ...
- 使用 Istioctl 安装 istio
使用 Istioctl 安装 istio 下载 Istio 转到 Istio 发布 页面,下载针对你操作系统的安装文件, 或用自动化工具下载并提取最新版本(Linux 或 macOS): [root@ ...
- python入门教程之三编码问题
1编码问题 Python文件中如果未指定编码,在执行过程中会出现报错: !/usr/bin/python print ("你好,世界") 以上程序执行输出结果为: 文件" ...