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中的鼠标事件的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中的鼠标悬停事件的用法详解

JavaScript中的鼠标悬停事件的用法详解

JavaScript中的鼠标事件

JavaScript事件对象

如何使用 javascript 计时来控制鼠标停止和鼠标移动事件

如何根据鼠标点击位置参数触发Javascript中的事件?