JavaScript中的鼠标事件
Posted 不懂老爱瞎逼逼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript中的鼠标事件相关的知识,希望对你有一定的参考价值。
利用下面这个div标签来做鼠标事件的演示,当把鼠标在‘我是div’和’我是span‘两个位置及其之外的位置上操作时,不同事件操作结果不同
<div class="div1">我是div
<br>
<span>我是span</span>
</div>
1、左键单击事件 click
var oDiv = document.querySelector(‘div‘); oDiv.onclick = function(){ console.log(‘这是一个左键单击事件‘); }
2、左键双击事件 dbclick
var oDiv = document.querySelector(‘div‘); oDiv.ondbclick = function(){ console.log(‘这是一个左键双击事件‘); }
3、右键单击事件 contextmenu
var oDiv = document.querySelector(‘div‘); oDiv.oncontextmenu = function(){ console.log(‘这是一个右键单击事件‘); }
4、鼠标器按下事件 mousedown
var oDiv = document.querySelector(‘div‘); //只要按下就触发,不分左右键 oDiv.onmousedown = function(){ console.log(‘鼠标按下事件‘); }
5、鼠标按下抬起`` 事件 mouseup
var oDiv = document.querySelector(‘div‘); //只要抬起就触发,不分左右键 oDiv.onmouseup = function(){ console.log(‘鼠标离开事件‘); }
6、鼠标移入事件
经过边界线触发 mouseover mouseenter
//每经过一个子级都会触发一次 var oDiv = document.querySelector(‘div‘); oDiv.onmouseover = function(){ console.log(‘鼠标over事件‘); } //只触发一次,父级触发后,经过子级不再触发 var oDiv = document.querySelector(‘div‘); oDiv.onmouseenter = function(){ console.log(‘鼠标enter事件‘); }
7、鼠标移出事件
经过边界线触发 mouseout mouseleave
//经过父级不触发,从父级离开,并进入子级或其他级触发 var oDiv = document.querySelector(‘div‘); oDiv.onmouseout = function(){ console.log(‘鼠标out事件‘); } //进入父级不触发,进入子级也不触发,离开父级触发 var oDiv = document.querySelector(‘div‘); oDiv.onmouseleave = function(){ console.log(‘鼠标leave事件‘); }
8、鼠标移动 mousemove
鼠标再标签范围内移动,会触发事件,类似于hover
//鼠标在父级里面,每移动一步都会触发效果,小幅度移动也被记录 var oDiv = document.querySelector(‘div‘); oDiv.onmousemove = function(){ console.log(‘鼠标move事件‘); }
以上是关于JavaScript中的鼠标事件的主要内容,如果未能解决你的问题,请参考以下文章