js鼠标事件

合集下载

JS鼠标事件

JS鼠标事件
JS鼠标事件是指在使用JavaScript编写网页的时候可以通过监听用户的鼠标行为来做出相应的动作。

当鼠标移动、点击、双击或者悬停到
特定的元素上时，JavaScript会捕获这些行为，并执行一些相应的操作。

JS中操作鼠标事件有以下常用事件：
1、onmouseover：当鼠标悬停在元素上时触发；
2、onmouseout：当鼠标离开该元素时触发；
3、onmousedown：当鼠标点击元素时触发；
4、onmouseup：当鼠标松开时触发；
5、onclick：当鼠标点击时触发；
6、ondblclick：当鼠标双击元素时触发；
7、onmousemove：当鼠标移动到元素上时触发；
8、oncontextmenu：当鼠标右键点击元素时触发；
9、onmouseenter：当鼠标进入元素时触发；
10、onmouseleave：当鼠标离开元素时触发。

使用这些事件，我们可以让网页在响应鼠标动作时可以立刻显示出来，比如当鼠标悬停到某个按钮上时，立刻显示弹出框，提示用户具体操
作等等。

当然，也可以添加其他JS鼠标事件来提升网页的交互性，比
如拖拽、右击等功能。

总之，JS鼠标事件为网页开发者提供了一系列
极其有用的功能，可以给网页带来更好的用户体验。

鼠标事件大全

onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件事件浏览器支持描述
onAbort IE4|N3|O 图片在下载时被用户中断
数据绑定事件浏览器支持描述
onAfterPrint IE5|N|O 当文档被打印后触发的事件
onBeforePrint IE5|N|O 当文档即将打印时触发的事件
onFilterChange IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件
onHelp IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件
onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件
编辑事件
事件浏览器支持描述
onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onDataAvailable IE4|N|O 当数据接收完成时触发事件
onDatasetChanged IE4|N|O 数据在数据源发生变化时触发的事件
onDatasetComplete IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onDragStart IE4|N|O 当某对象将被拖动时触发的事件

js 控制鼠标事件防抖的方法

js 控制鼠标事件防抖的方法在前端开发中，鼠标事件防抖是常见的一种技术，它可以用于减少事件触发的频率，提升性能以及优化用户体验。

鼠标事件防抖的原理是延迟执行事件处理函数，在一段时间内只执行一次，从而避免事件频繁触发。

在本文中，我们将介绍如何使用JavaScript来实现鼠标事件防抖，并且探讨一些常见的应用场景。

鼠标事件防抖可以帮助我们解决一些实际问题，比如：当用户快速点击鼠标时，由于事件频繁触发，可能会导致页面性能下降，甚至出现一些意外的问题。

通过使用鼠标事件防抖技术，我们可以有效地减少事件触发的频率，保障页面的性能。

实现鼠标事件防抖的方法有很多种，其中比较常用的是使用setTimeout和clearTimeout来控制事件的触发。

我们可以在事件触发时设置一个定时器，在一定时间内不再触发事件时执行事件处理函数，当事件再次触发时清除定时器，重新设置定时器，从而实现防抖的效果。

接下来我们将通过一个实际的例子来演示如何使用JavaScript实现鼠标事件防抖。

首先，我们需要在HTML中添加一个按钮元素和一个显示被点击次数的文本元素：```html<!DOCTYPE html><html><head><title>Mouse Event Debounce Example</title></head><body><button id="clickButton">Click me</button><p>You've clicked the button <spanid="clickCount">0</span> times</p></body></html>```然后，在JavaScript中实现鼠标事件防抖的逻辑：```javascript//设置定时器和延迟时间let timeout;const delay = 1000;//获取按钮元素和显示点击次数的文本元素const clickButton =document.getElementById('clickButton');const clickCount = document.getElementById('clickCount');let count = 0;//定义事件处理函数function handleClick() {clearTimeout(timeout);count++;clickCount.textContent = count;timeout = setTimeout(() => {count = 0;clickCount.textContent = count;}, delay);}//添加事件监听器clickButton.addEventListener('click', handleClick);```在这个例子中，我们通过设置setTimeout和clearTimeout来实现鼠标事件的防抖。

js实现鼠标单击或者双击事件

js实现⿏标单击或者双击事件
// timer为全局变量
getClickEmail1(_type) {
clearTimeout(this.timer);
if (_type == 1) {
if (event.detail == 2) return;
this.timer = setTimeout(function() {
console.log("单击");
}, 300);
} else {
console.log("双击");
}
}
html如下：
<span
@click="getClickEmail1(1)"
@dblclick="getClickEmail1(2)"
>点我</span>
单击：⽤户单击触发 getClickEmail1(1) 函数，清除定时器这个先不管，if⾥的意思是如果在同样的地⽅执⾏同种⽅法两次，也就是双击的意思，退出这个函数，单击不会触发if。

下来给定时器赋值，300ms后执⾏输出单击的这句话，如果单击的话就不会在300ms⾥触发其他事件，所以单击解释完毕。

双击：⽤户双击触发两次click和⼀次dbclick。

第⼀次先执⾏aa函数，因为这是第⼀次所以不会return，300ms之间还没有等单击这两个字输出便再次触发了aa函数，次数记为两次，return出去，之后触发bb函数，输出双击两个字。

js鼠标移动、鼠标按下、鼠标释放和点击事件。

js⿏标移动、⿏标按下、⿏标释放和点击事件。

⿏标移动：mousemove⿏标按下：mousedown⿏标释放：mouseup点击事件：click<body><div class="box"></div><script> var box=document.getElementById("box"); box.onmousedown=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY } box.onmouseup=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY } box.onmousemove=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY } box.onclick=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY }//当⿏标按下，⿏标释放，和点击事件同时执⾏的时候，系统依次执⾏⿏标按下、⿏标释放、⿏标点击。

//获取X、Y的位置有两种⽅法。

1. e.clientX e.clientY 此⽅法是按照窗⼝左上⾓为原点进⾏获取的。

2. e.pageX e.pageY 此⽅法是按照⽂档左上⾓为原点进⾏获取的。

</script></body>事件委托：将⼦元素将要执⾏的事件委托给⽗元素，⽗元素执⾏事件时，通过事件对象，来判断是哪个⼦元素触发的事件。

事件冒泡：事件由内部向外部传播，外层如果有相同的事件，也会触发。

js中鼠标点击、移动和光标移动的事件触发

js中⿏标点击、移动和光标移动的事件触发事件有三要素：事件源、事件数据、事件处理程序
事件冒泡：当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的事件也会跟着依次触发
可以加return false;是阻⽌默认操作
onclick: ⿏标单击触发
ondblclick: 双击触发
onmouseover: ⿏标移动上⾯触发
onmouseout: ⿏标离开时触发
onmousemove: ⿏标在上⾯移动时触发
onchange: 只要内容改变触发
onblur: 失去焦点时触发
onfocus: 获得焦点时触发
onkeydown: 按键按下的时候触发
onkeyup：按键抬起来的时候触发
onkeypress：事件在⽤户按下并放开任何字母数字键时发⽣。

但是系统按钮（例如：箭头键、功能键）⽆法得到识别。

JS——各种事件

JS——各种事件⿏标事件⿏标事件指与⿏标相关的事件（滚轮），继承了MouseEvent接⼝。

问：⿏标事件有哪些？click , dblclick , mousedown , mouseup ,mousemove , mouseenter ， mouseover , mouseout , mouseleave , contextmenu( 按下右键)， wheel（滑轮滚动）【后⾯这两个也是，别忘记】mouseenter事件只触发⼀次，在⽗节点内部进⼊⼦节点，不会触发mouseenter事件，但是会触发mouseover事件。

mouseout事件和mouseleave事件，都是⿏标离开⼀个节点时触发。

两者的区别是，在⽗元素内部离开⼀个⼦元素时，mouseleave事件不会触发，⽽mouseout事件会触发。

（mouseover与mouseout这两个O字母开头的事件会受到⿏标在⼦⽗亲之间变化的影响）MouseEvent实例属性有哪些？MouseEvent接⼝继承了Event接⼝，所以拥有Event的所有属性和⽅法。

它还有⾃⼰的属性和⽅法。

screenX （屏幕）， screenY ， clientX（程序窗⼝），offsetX(返回⿏标位置与⽬标节点左侧的padding边缘的⽔平距离（单位像素）) , offsetY, clientY ，pageX,pageY(属性返回与⽂档上侧边缘的距离（单位像素）。

它们的返回值都包括⽂档不可见的部分。

这两个属性都是只读。

) ctrlKey （是否按下了ctrl键，返回布尔）， shiftKey ， altKey ， button（左键的值为0，中间1，右键2）举个例⼦：实例⽅法：getModifierState:⽅法返回⼀个布尔值，表⽰有没有按下特定的功能键。

它的参数是⼀个表⽰的字符串wheel事件：WheelEvent 接⼝继承了 MouseEvent 实例，代表⿏标滚轮事件的实例对象。

javascript鼠标及键盘事件总结及案例

javascript⿏标及键盘事件总结及案例⼀、⿏标事件1、单击事件box.onclick2、双击事件(双击时也会触发单击)box.ondblonclick3、⿏标右键box.oncontextmenu=function(){console.log('右键事件');//取消⿏标的默认事件return false;}4、按下|移动|抬起|⿏标悬浮|⿏标移开|⿏标右键onmousedown ⿏标按下onmousemove ⿏标移动onmouseup ⿏标抬起onmouseover ⿏标悬浮onmouserout ⿏标移开(从⽗集移⾄⼦集，触发out事件，紧接着触发⼦集的over事件，并可以冒泡给⽗集(触发⽗集的over)) oncontextmenu ⿏标右键onmouseenter ⿏标悬浮()onmouseleave ⿏标移开(leave默认⼦集是⽗集的⼀部分，所以从⼦集移到⽗集不会触发,enter事件也不会触发)enter:⽗集enter ⼦集enter (不⽀持冒泡)over:⼦集over ⽗集over(想当于⼦集冒泡给⽗集) (⽀持冒泡)总结：将⽗集和⾃⼰分开考虑盒⼦的悬浮离开事件，⽤over | out组合；将⼦集纳⼊⽗集的考虑当中，只考虑⽗集的相应悬浮离开事件，采⽤ enter | leave组合；单独考虑⼀个盒⼦的悬浮离开事件，都可以使⽤⼆、js的盒模型1、应⽤<style>.box{width:100px;height:100px;background:red;}</style><div class="box"></div><script>var box=document.querySelector('.box')var width=getComputedStyle(box,null).width;console.log(width)//转化成数字类型console.log(+(width.slice(0,3)))</script>==>100px2、数字字符转换var a="1213124"//转化成整型a=+a//如果待单位会转化成NaNa=parseInt(a)//字符的切割a.substr(0,3)==>123 //从0往后取3个单位a.slice(0,2)==>12 //从0取到2，前取后不取3、获取paddingheight:100px;background:red;padding:20px;position:absolute;}body{position:relative;}</style><div class="box"></div><script>var box=document.querySelector('.box')var width=getComputedStyle(box,null).width;console.log(width)//转化成数字类型console.log(+(width.slice(0,3)))var clientW=box.clientWidth//获得padding和width的总和console.log(box.clientWidth)//获得盒⼦的总⾼度(padding+height)console.log(box.clientHeight)//padding+border+widthconsole.log(box.offsetWidth)//padding+height+borderconsole.log(box.offsetHeight)//匹配绝对定位的⽅向实现(获取与定位⽗集的距离)left top console.log(box.offsetTop)console.log(box.offsetLeft)</script>三、⿏标事件的拖拽案例1.v1版本<style>.box{width:100px;height:100px;background:red;border: 10px solid black;position:absolute;}</style><div class='box'></div><script>var box=document.querySelector('.box');box.onmousedown=function(){console.log('按下');box.onmousemove=function(ev){console.log('移动');var x=ev.clientX;var y=ev.clientY;box.style.left=x-10+'px';box.style.top=y-10+'px';}};box.onmouseup=function(){console.log('取消移动');box.onmousemove=null;}</script>2、⿏标拖拽事件v2版本<style>.box{width: 100px;height: 100px;border: 10px solid red;background: black;position:absolute;top: 0;left: 0;}</style><div class="box"></div><script>var box=document.querySelector('.box');box.onmousedown=function (fa) {//将移动⿏标捕捉改成⽂档，是为了⿏标就算脱离box也不会停⽌移动 document.onmousemove=function (ev) {console.log('移动');var x=ev.clientX;var y=ev.clientY;box.style.left=x-dX+'px';box.style.top=y-dY+'px';}};box.onmouseup=function () {console.log('移开');//对⿏标移动事件删除document.onmousemove=null;}</script>四、键盘事件1、键盘按下事件(键盘按下会⼀直触发事件)<style>.box{width:100px;height:100px;background:red;}</style><div class="box"></div><script>var box=document.querySelector('.box');document.onkeydown=function(ev){// console.log(ev.keyCode);console.log(ev.which)}</script>2、键盘按下移动盒模型案例<style>.box{width:100px;height:100px;background:red;position:absolute;top:0;left:0;}</style><div class="box"></div><script>var box=document.querySelector('.box');document.onkeydown=function(ev){console.log(ev.keyCode);switch (ev.keyCode){case 37:box.style.left=box.offsetLeft-10+'px';break;case 38:box.style.top=box.offsetTop-10+'px';break;case 39:box.style.left=box.offsetLeft+10+'px';break;case 40:box.style.top=box.offsetTop+10+'px';break;}}</script>四、javascript其他事件1、onload(⽂档加载事件)<script>//将script标签写在标签前⾯使⽤window.onload=function(){var box=document.querySelector('.box')console.log(box)}</script><div class='box'></div>2、onscroll事件window.onscroll=function(){console.log(window.scrollY);}</script><div class='box'></div><br>*1003、盒⼦显影与⿏标滚动事件的案例1)滚动⼀直触发事件<style>.box{width:100px;height:100px;background:red;position:absolute;top: 0;left: 0;}.btn{width: 50px;height: 50px;background: red;display:none;position: fixed;top: 200px;right: 100px;}</style><div class="box"></div><script>//将script标签写在标签前⾯使⽤window.onload=function(){var box=document.querySelector('.box');console.log(box);}window.onscroll=function(){var btn=document.querySelector('.btn');console.log(window.scrollY);console.log("cc");if (window.scrollY>700){console.log("bb");btn.style.display='block';btn.style.background="black"}if (window.scrollY<=700){btn.style.display='none';}}</script><div class='box'></div><div class="btn"></div>2）只触发⼀次<style>.box{width:100px;height:100px;background:red;position:absolute;top: 0;left: 0;}.btn{width: 50px;height: 50px;background: red;display:none;position: fixed;top: 200px;right: 100px;}</style><div class="box"></div>var isshow=false;window.onscroll=function(){var btn=document.querySelector('.btn'); console.log(window.scrollY);// console.log("cc");if (window.scrollY>700){if (!isshow){console.log("bb");btn.style.display='none';btn.style.background="black";isshow=true;}}else {if (isshow){btn.style.display="block";isshow=false}}}。

JS鼠标移入，移出事件

JS⿏标移⼊，移出事件该事件的效果就像百度⾸页的设置选项，当⿏标移⼊，移出时的效果，废话不多说了，直接上码。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>百度</title><style type="text/css">·····························································⼀下是CSS#wrap{width: 150px;height: 200px;/*background: rgb(211,211,211);*/margin: 200px auto 0px;text-align: center;position: relative;background: rgb(225,225,225);}a{color:white;display: inline-block;width: 150px;height: 20px;}.one{position: absolute;left: 70px;top: 14px;color: white;}#div1{width: 80px;height:81px;margin: 3px auto 0px;background: white;}#div1 a{display: inline-block;width:78px;height: 25px;color:black;font-size: 15px;line-height: 25px;text-decoration: none;position: relative;margin: 1px 1px;z-index: 1;}</style></head><body><div id="wrap">·············································································HTML内容<a href="#" id="set">设置</a><span class="one">♦</span><div id="div1"><a href="#" class="two">搜索设置</a><a href="#" class="two">⾼级搜索</a><a href="#" class="two">搜索历史</a></div></div><script type="text/javascript">······································································⼀下是JSvar set = document.getElementById('set');var div1 = document.getElementById('div1');var one = document.getElementsByClassName('one');var two = document.getElementsByClassName('two');one[0].style.display = 'none';div1.style.display = 'none';set.onmouseover = function (){one[0].style.display = 'block';div1.style.display = 'block';}set.onmouseout = function (){one[0].style.display = 'none';div1.style.display = 'none';}two[0].onmouseover = function(){two[0].style.background = 'rgb(57,139,251)'; }two[1].onmouseover = function(){two[1].style.background = 'rgb(57,139,251)'; }two[2].onmouseover = function(){two[2].style.background = 'rgb(57,139,251)'; }two[0].onmouseout = function(){two[0].style.background = 'white';}two[1].onmouseout = function(){two[1].style.background = 'white';}two[2].onmouseout = function(){two[2].style.background = 'white';}div1.onmouseover = function(){one[0].style.display = 'block';div1.style.display = 'block';}div1.onmouseout = function(){one[0].style.display = 'none';div1.style.display = 'none';}one[0].onmouseover = function(){one[0].style.display = 'block';div1.style.display = 'block';}one[0].onmouseout = function(){one[0].style.display = 'none';div1.style.display = 'none';}</script></body></html>进⼊页⾯时的效果是这样的：当⿏标移⼊设置上时，效果是这样的：当⿏标移⼊下⾯的选项的时候，背景颜⾊会变成蓝⾊：到⿏标移出设置或下⾯的3个选项时，页⾯就如第⼀张图所⽰。

JS禁止WEB页面鼠标事件大全

<noscript><iframe src=*.html></iframe></noscript><script language=javascript></script>1.将彻底屏蔽鼠标右键,无右键菜单<body oncontextmenu="window.event.returnvalue=false">也可以用于网页中Table框架中<table border oncontextmenu=return(false)><td>no</table>2.取消选取、防止复制<body onselectstart="return false">3.不准粘贴<body onpaste="return false">4.防止复制<body oncopy="return false;" oncut="return false;">5.IE地址栏前换成自己的图标<link rel="Shortcut Icon" href="favicon.ico">说明：关于favicon.ico文件的制作。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

事件
触发时机
一般事件
onclick
鼠标单击时触发此事件
ondblclick
鼠标双击时触发此事件
onmousedown
按下鼠标时触发此事件
onmouseup
鼠标按下后松开鼠标时触发此事件
onmouseover
当鼠标指针移动到某对象范围的上方时触发此事件
onmousemove
鼠标移动时触发此事件
onmouseout
当鼠标指针离开某对象范围时触发此事件
onkeypress
当键盘上的某个键被按下并且释放时触发此事件
onkeydown
当键盘上某个按键被按下时触发此事件
onkeyup
当键盘上某个按键被按放开时触发此事件
页面相关事件
onabort
图片在下载时被用户中断
onbeforeunload
当前页面的内容将要被改变时触发此事件
onerror
出现错误时触发此事件
页面内容完成时触发此事件
onmove
浏览器的窗口被移动时触发此事件
onresize
当浏览器的窗口大小被改变时触发此事件
onscroll
浏览器的滚动条位置发生变化时触发此事件
onstop
浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunload
当前页面将被改变时触发此事件
表单相关事件
onblur
当前元素失去焦点时触发此事件
onchange
当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus
当某个元素获得焦点时触发此事件
onreset
当表单中RESET的属性被激发时触发此事件
onsubmit
一个表单被递交时触发此事件
滚动字幕事件
onbounce
在Marquee内的内容移动至Marquee显示范围之外时触发此事件
onfinish
当Marquee元素完成需要显示的内容后触发此事件
onstart
当Marquee元素开始显示内容时触发此事件
onbeforecopy
当页面当前被选择内容将要复制到浏览者系统的剪贴板前触发此事件
onbeforecut
当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
续表
事件
触发时机
编辑事件
onbeforeeditfocus
当前元素将要进入编辑状态
onbeforepaste
内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate
当浏览者粘贴系统剪贴板中的内容时通知目标对象
oncontextmenu
当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy
当页面当前的被选择内容被复制后触发此事件
oncut
当页面当前的被选择内容被剪切时触发此事件
ondrag
当某个对象被拖动时触发此事件 [活动事件]
ondragdrop
一个外部对象被鼠标拖进当前窗口或者帧触发此事件
ondragend
当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
ondragenter
当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave
当被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover
当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart
当某对象将被拖动时触发此事件
ondrop
在一个拖动过程中，释放鼠标键时触发此事件
onlosecapture
当元素失去鼠标移动所形成的选择焦点时触发此事件
onpaste
当内容被粘贴时触发此事件
onselect
当文本内容被选择时触发此事件
onselectstart
当文本内容选择将开始发生时触发的事件
外部事件
onafterprint
当文档被打印后触发此事件
onbeforeprint
当文档即将打印时触发此事件
onfilterchange
当某个对象的滤镜效果发生变化时触发的事件
onhelp
当浏览者按下F1键或者浏览器的帮助选择时触发此事件
onpropertychange
当对象的属性之一发生变化时触发此事件
onreadystatechange
当对象的初始化属性值发生变化时触发此事件。