鼠标和键盘事件

鼠标常见的事件，按下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. 加密脚本分析—evil.py

    加密脚本分析-evil.py 1.题目 源文件 一共两个文件 enc_flag.txt evil.py(原文件无注释) 1 # coding: utf-8 2 3 import base64 4 im ...

  2. vRealize Operations Manager 安全补丁修复

    vRealize Operations Manager 安全补丁修复 背景:记录一次安全同事在检测中发现 vRealize Operations Manager 存在安全漏洞,需要整改修复,于是到VM ...

  3. 标准正态分布表—R语言

    正态分布是最重要的一种概率分布.正态分布概念是由德国的数学家和天文学家Moivre于1733年首次提出的,但由于德国数学家Gauss率先将其应用于天文学家研究,故正态分布又叫高斯分布.高斯这项工作对后 ...

  4. 创建用户认证授权的 kubeconfig 文件

    创建用户认证授权的 kubeconfig 文件 当我们安装好集群后,如果想要把 kubectl 命令交给用户使用,就不得不对用户的身份进行认证和对其权限做出限制. 下面以创建一个 cby 用户并将其绑 ...

  5. 五月二十五日jdbc基础知识点

    Jdbc连接数据库1.建立与数据库的连接1.1导入jdbc包1.2加载JDBC驱动java.lang.Class.forName(JDBCDriverClass);Class.forName(driv ...

  6. 【c#表达式树】最完善的表达式树Expression.Dynamic的玩法

    引言 在我第一次写博客的时候,写的第一篇文章,就是关于表达式树的,链接:https://www.cnblogs.com/1996-Chinese-Chen/p/14987967.html,其中,当时一 ...

  7. day60:Linux压缩与打包&用户管理&用户提权sudo&grep,sed,awk,sort,uniq

    目录 1.文件管理-压缩与打包 2.用户管理 用户怎么查 如何创建用户 创建的用户信息都存储在哪? 用户存储密码的文件 如何为用户设定密码? 3.用户组 4.用户提权相关 5.Extra:额外补充 文 ...

  8. 【Vue项目】尚品汇（四）Search组件开发

    Search模块开发 分析:1)编写静态页面 2)编写api 3)编写vuex三大件 4)组件获取仓库数据,并进行动态展示 1 SearchSelector 1 编写api export const ...

  9. css中文字与图片对齐

    css中文字与图片对齐 第一种,使用vertical-align:middle .icon{ background-repeat:no-repeat; background-position:cent ...

  10. hackathon 复盘：niche 海外软件工具正确的方法 6 个步骤

    上周末,去参加了北京思否 hackathon,两天时间内从脑暴 & 挖掘软件 IDEA -> Demo 研发路演,这次经历让我难忘.这里我的看法是每个开发者圈友,都应该去参加一次 hac ...