js--鼠标点击移动松开事件、滚轮事件、键盘事件

1.推拽

2.滚轮事件

3.键盘事件

1.推拽

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;position: absolute;}#box2{width: 100px;height: 100px;background-color: yellow;position: absolute;left:200px;top:200px}</style><script type="text/javascript">window.onload = function(){/** 拖拽box1元素*  - 拖拽的流程*        1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown*       2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove*        3.当鼠标松开时，被拖拽元素固定在当前位置    onmouseup*///获取box1var box1 = document.getElementById("box1");//为box1绑定一个鼠标按下事件//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedownbox1.onmousedown = function(event){event = event || window.event;//div的偏移量 鼠标.clentX - 元素.offsetLeft//div的偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - box1.offsetLeft;var ot = event.clientY - box1.offsetTop;//为document绑定一个onmousemove事件document.onmousemove = function(event){event = event || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置box1.style.left = left+"px";box1.style.top = top+"px";};//为document绑定一个鼠标松开事件document.onmouseup = function(){//当鼠标松开时，被拖拽元素固定在当前位置  onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;};};};</script></head><body><div id="box1"></div><div id="box2"></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;position: absolute;}#box2{width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function(){/** 拖拽box1元素*  - 拖拽的流程*         1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown*       2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove*        3.当鼠标松开时，被拖拽元素固定在当前位置    onmouseup*///获取box1var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");//为box1绑定一个鼠标按下事件//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedownbox1.onmousedown = function(event){//设置box1捕获所有鼠标按下的事件/** setCapture()*    - 只有IE支持，但是在火狐中调用时不会报错，*      而如果使用chrome调用，会报错*//*if(box1.setCapture){box1.setCapture();}*/box1.setCapture && box1.setCapture();event = event || window.event;//div的偏移量 鼠标.clentX - 元素.offsetLeft//div的偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - box1.offsetLeft;var ot = event.clientY - box1.offsetTop;//为document绑定一个onmousemove事件document.onmousemove = function(event){event = event || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置box1.style.left = left+"px";box1.style.top = top+"px";};//为document绑定一个鼠标松开事件document.onmouseup = function(){//当鼠标松开时，被拖拽元素固定在当前位置  onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;//当鼠标松开时，取消对事件的捕获box1.releaseCapture && box1.releaseCapture();};/** 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，*   此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，*  如果不希望发生这个行为，则可以通过return false来取消默认行为* * 但是这招对IE8不起作用*/return false;};};</script></head><body>我是一段文字<div id="box1"></div><div id="box2"></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;position: absolute;}#box2{width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function(){/** 拖拽box1元素*  - 拖拽的流程*         1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown*       2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove*        3.当鼠标松开时，被拖拽元素固定在当前位置    onmouseup*///获取box1var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var img1 = document.getElementById("img1");//开启box1的拖拽drag(box1);//开启box2的drag(box2);drag(img1);};/** 提取一个专门用来设置拖拽的函数* 参数：开启拖拽的元素*/function drag(obj){//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedownobj.onmousedown = function(event){//设置box1捕获所有鼠标按下的事件/** setCapture()*  - 只有IE支持，但是在火狐中调用时不会报错，*      而如果使用chrome调用，会报错*//*if(box1.setCapture){box1.setCapture();}*/obj.setCapture && obj.setCapture();event = event || window.event;//div的偏移量 鼠标.clentX - 元素.offsetLeft//div的偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - obj.offsetLeft;var ot = event.clientY - obj.offsetTop;//为document绑定一个onmousemove事件document.onmousemove = function(event){event = event || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置obj.style.left = left+"px";obj.style.top = top+"px";};//为document绑定一个鼠标松开事件document.onmouseup = function(){//当鼠标松开时，被拖拽元素固定在当前位置    onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;//当鼠标松开时，取消对事件的捕获obj.releaseCapture && obj.releaseCapture();};/** 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，*     此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，*  如果不希望发生这个行为，则可以通过return false来取消默认行为* * 但是这招对IE8不起作用*/return false;};}</script></head><body>我是一段文字<div id="box1"></div><div id="box2"></div><img src="img/an.jpg" id="img1" style="position: absolute;"/></body>
</html>

2.滚轮事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;}</style><script type="text/javascript">window.onload = function(){//获取id为box1的divvar box1 = document.getElementById("box1");//为box1绑定一个鼠标滚轮滚动的事件/** onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，*    但是火狐不支持该属性* * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件*  注意该事件需要通过addEventListener()函数来绑定*/box1.onmousewheel = function(event){event = event || window.event;//event.wheelDelta 可以获取鼠标滚轮滚动的方向//向上滚 120   向下滚 -120//wheelDelta这个值我们不看大小，只看正负//alert(event.wheelDelta);//wheelDelta这个属性火狐中不支持//在火狐中使用event.detail来获取滚动的方向//向上滚 -3  向下滚 3//alert(event.detail);/** 当鼠标滚轮向下滚动时，box1变长*   当滚轮向上滚动时，box1变短*///判断鼠标滚轮滚动的方向if(event.wheelDelta > 0 || event.detail < 0){//向上滚，box1变短box1.style.height = box1.clientHeight - 10 + "px";}else{//向下滚，box1变长box1.style.height = box1.clientHeight + 10 + "px";}/** 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false* 需要使用event来取消默认行为event.preventDefault();* 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错*/event.preventDefault && event.preventDefault();/** 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，* 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为*/return false;};//为火狐绑定滚轮事件bind(box1,"DOMMouseScroll",box1.onmousewheel);};function bind(obj , eventStr , callback){if(obj.addEventListener){//大部分浏览器兼容的方式obj.addEventListener(eventStr , callback , false);}else{/** this是谁由调用方式决定* callback.call(obj)*///IE8及以下obj.attachEvent("on"+eventStr , function(){//在匿名函数中调用回调函数callback.call(obj);});}}</script></head><body style="height: 2000px;"><div id="box1"></div></body>
</html>

3.键盘事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){/** 键盘事件：*     onkeydown*      - 按键被按下*        - 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发*       - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快*             这种设计是为了防止误操作的发生。*   onkeyup*        - 按键被松开* *  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document*/document.onkeydown = function(event){event = event || window.event;/** 可以通过keyCode来获取按键的编码*   通过它可以判断哪个按键被按下* 除了keyCode，事件对象中还提供了几个属性*     altKey*     ctrlKey*    shiftKey*       - 这个三个用来判断alt ctrl 和 shift是否被按下*            如果按下则返回true，否则返回false*///console.log(event.keyCode);//判断一个y是否被按下//判断y和ctrl是否同时被按下if(event.keyCode === 89 && event.ctrlKey){console.log("ctrl和y都被按下了");}};/*document.onkeyup = function(){console.log("按键松开了");};*///获取inputvar input = document.getElementsByTagName("input")[0];input.onkeydown = function(event){event = event || window.event;//console.log(event.keyCode);//数字 48 - 57//使文本框中不能输入数字if(event.keyCode >= 48 && event.keyCode <= 57){//在文本框中输入内容，属于onkeydown的默认行为//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中return false;}};};</script></head><body><input type="text" /></body>
</html>

js--鼠标点击移动松开事件、滚轮事件、键盘事件相关推荐

html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
DOM事件里面的键盘事件
在JS里面有很多很多的事件,我们以后将会接触到它们,而它们在我们的JS代码里面是必不可少的,而现在我要讲的就是DOM事件里面的键盘事件. 相信很多小伙伴都知道,平时有一些选项不用按确定按钮,直接一个回 ...
swt 键盘事件ctrl+c_VB键盘事件详解
"本节课程一起学习VB中的键盘事件."键盘事件的作用:获得键盘输入信息,只有获得焦点的对象才能接受键盘事件.键盘事件有三种:KeyPress.KeyDown.KeyUpKeyPre ...
html 获取鼠标参数,js鼠标点击特效，有关参数设置
效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的博客后台管理设置本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦来个"红橙黄绿蓝靛 ...
office 2019 工具鼠标点击反应慢、滚轮滚动反应慢的问题
office 2019 word鼠标点击反应慢要等一下硬件图形加速设置问题随便打开一个Word文档,点击左上角>文件>选项>高级,找到标题是"显示",找到&q ...
java 获取键盘事件,java获取键盘事件
本人认为,实现它其实最简单的莫属一个类,Java 本身就提供的,这个类就是 Scanner.先举个例子如下: import java.util.Scanner; /** * 测试从键盘读取用户的.. ...
Vue中监听键盘事件及自定义键盘事件
在一些搜索框中,我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作.在原生js或者jQuery中,我们需要判断e.keyCode的值来获取用户所按的键.这样就存 ...
js鼠标点击事件监听
鼠标移动监听: <script>var cont = 0;function f() {document.getElementById("an1").innerHTML ...
【js中鼠标点击、移动和光标移动的事件触发】
事件有三要素:事件源.事件数据.事件处理程序事件冒泡:当元素嵌套的时候,内部元素激发某个事件后,默认情况下外部元素相应的事件也会跟着依次触发可以加return false;是阻止默认操作 oncl ...
小程序点击事件改变样式(普通js鼠标点击事件)
1.wxml中 <view class="column"> <view class="body-view {{num==1?'active':''}}& ...

js--鼠标点击移动松开事件、滚轮事件、键盘事件

1.推拽

2.滚轮事件

3.键盘事件

js--鼠标点击移动松开事件、滚轮事件、键盘事件相关推荐

最新文章

热门文章