鼠标和键盘事件

鼠标常见的事件，按下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 之三 鼠标和键盘事件处理的更多相关文章

  1. js根据鼠标和键盘判断页面是否长时间未进行操作

    <script> var count = 0; var outTime = 1;//分钟 window.setInterval(go, 1000); function go() { cou ...

  2. js 禁止鼠标和键盘行为

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  4. 【前端】js代码模拟用户键盘鼠标输入

    js代码模拟用户键盘鼠标输入 原生js var event = new Event('mousewheel'); event.wheelDelta = 360 document.dispatchEve ...

  5. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

  6. js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键

    js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键 一.总结 一句话总结:event.which属性. 1.如何获取事件发生的时间? timeStamp属性 event.timeStamp 属性 ...

  7. Qt Quick 事件处理之鼠标、键盘、定时

    一.鼠标事件 MouseArea 对象可以附加到一个 item 上供 item 处理鼠标事件,它本身是一个不可见的 item .在其内部,可以直接引用它所附着的对象的属性和方法.你可以将 MouseA ...

  8. js 鼠标和键盘事件

    js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...

  9. 20个优秀的 JavaScript 键盘事件处理库

    键盘事件是 Web 开发中最常用的事件之一,通过对键盘事件的捕获和处理可以提高网站的易用性和交互体验.下面,我们向大家介绍收集的20款优秀的 JavaScript 键盘事件处理库,帮助开发人员轻松处理 ...

  10. C#键盘事件处理(来源网上)

    C#键盘事件处理 如果你希望用户按F1弹出chm帮助,代码如下: private void FrmMain_Load(object sender, EventArgs e) { this.KeyPre ...

随机推荐

  1. 有奖征文活动：从 RTC 到 RTE，从音视频到「实时万象」！

    Hi 小伙伴们, 社区已经更名 RTE 两个月辣-大家对于 RTC 和 RTE 的区分,是否还有疑惑呢? 关于这两者的区别,我们创始人兼 CEO 赵斌老师说: "RTC(实时音视频)从 Co ...

  2. 声网 X 在线自习室 同学陪伴、老师监督的在线自习是如何火出圈的？

    实时互联网像触角一样,通过情景的共享延伸开来,链接着我们彼此的线下.线上生活,形成一张不可分割的网络.随着社交直播.在线教育.视频会议成为大众生活不可或缺的一部分的同时,智能手表.智能作业灯.视频双录 ...

  3. 基于深度学习的鸟类检测识别系统（含UI界面，Python代码）

    摘要:鸟类识别是深度学习和机器视觉领域的一个热门应用,本文详细介绍基于YOLOv5的鸟类检测识别系统,在介绍算法原理的同时,给出Python的实现代码以及PyQt的UI界面.在界面中可以选择各种鸟类图 ...

  4. GUI编程实战--贪吃蛇

    GUI编程实战--贪吃蛇 参考:遇见狂神说 https://space.bilibili.com/95256449 界面绘制 帧:如果时间片足够小,就是动画,一秒30帧.连起来是动画,拆开是静态的图片 ...

  5. 正则表达式(cases)

    匹配不含'aaa'和'bbb'的字符串: ^(?!.*aaa)(?!.*bbb).*$ To be continue...

  6. MySQL8.0 创建用户及授权 - 看这篇就足够了

    什么时候会用到 对接外系统时,需要给其余系统开放访问权限 本系统中,分权限管理数据,防止root权限删库跑路 mysql版本 MySql8.0+ 具体步骤 1.命令行进入MySql 使用 mysql ...

  7. Linux防火墙与端口操作命令

    CentOS 7系统 目录 1. 防火墙操作命令 2. 端口操作命令 3. CentOS 7 下安装firewall 1. 防火墙操作命令 序号 作用 命令 1 查看防火墙状态 systemctl s ...

  8. iOS 深色模式适配

    要求:iOS13.0以上 重点:需要所有界面进行适配,工作量巨大,需要从项目开始就进行适配:H5界面无法进行适配 实现方式:System Colors(常用).Semantic Colors(常用). ...

  9. 深入理解 Redis 新特性：Stream

    该数据结构需要 Redis 5.0.0 + 版本才可用使用 概述 Redis stream 是 Redis 5 引入的一种新的数据结构,它是一个高性能.高可靠性的消息队列,主要用于异步消息处理和流式数 ...

  10. Kubernetes集群调度增强之超容量扩容

    作者:京东科技 徐宪章 1 什么是超容量扩容 超容量扩容功能,是指预先调度一定数量的工作节点,当业务高峰期或者集群整体负载较高时,可以使应用不必等待集群工作节点扩容,从而迅速完成应用横向扩容.通常情况 ...