汇总一波——js常用鼠标事件

最新推荐文章于 2025-09-18 13:26:01 发布

原创最新推荐文章于 2025-09-18 13:26:01 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

本文深入讲解JavaScript中的鼠标事件，包括单击、按下、抬起、移动等常见事件，并通过实例演示了如何利用这些事件实现交互效果，如文字复制、背景色变化、跟随鼠标的游戏等。

js常用鼠标事件汇总

onclick 单击事件（相继触发mousedown与mouseup事件）
onmousedown 鼠标按下事件
onmouseup 鼠标抬起事件
onmousemove 鼠标移动事件
onmouseout 鼠标移出事件
onmouseover 鼠标指针移动到元素（被选元素或其子元素）上时触发常与onmouseout一起用
onmouseenter 只有在鼠标指针穿过被选元素时，才会触发，常与onmouseleave一起使用
onmouseleave 鼠标移出事件

onclick单击事件
案例：当鼠标单击submit按钮时B将会复制A的文字

   A:<input type="text" id="first" value="我们都是炎黄子孙"><br>
	B:<input type="text" id="second" value=""><br>
	<button >submit</button>
	<script>
	var button = document.getElementsByTagName('button')[0];
	 button.onclick = function(){
	 	document.getElementById('second').value=
        document.getElementById('first').value;
	 } 

</script>

在这里插入图片描述
onmousedown (鼠标按下事件)与onmouseup (鼠标抬起事件)
案例：当鼠标按下时元素的背景颜色将会变成黑色，鼠标抬起时元素恢复其本身的背景

<style>
		.box1{
			width: 100px;
			height: 100px;
			color: red;
			text-align: center;
			line-height: 100px;
			border:1px solid red;
			background: white;
		}
	</style>

   <script>
		var box1 = document.getElementsByClassName('box1')[0];
	       box1.onmousedown = function(){
	       	this.style.backgroundColor = 'black';
	       }
	       box1.onmouseup = function(){
	       	 	this.style.backgroundColor = 'red';

	       }
	</script>

在这里插入图片描述

onmouseover 鼠标指针移动到元素（被选元素或其子元素）上与onmouseout 与鼠标从某元素上移出

案例：当鼠标移动到该元素时使其背景颜色变为红色，鼠标从该元素上移出时恢复其本身的背景

<style>
		.box{
			width: 100px;
			height: 100px;
			background-color: black;
			margin: auto auto;
			
		}
	</style>
	<script>
		var box = document.getElementsByClassName('box')[0];
		box.onmouseover = function(){
			   this.style.backgroundColor ='red';
		}
		box.onmouseout = function(){
				this.style.backgroundColor ='black';
		}
	</script>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20200505172310370.gif)
## onmousenter (在鼠标指针穿过被选元素时)与onmouseleave (鼠标从该元素移出)
案例：当鼠标指针穿过该元素时，元素的大小与背景将发生改变，鼠标从该元素离开时，元素的大小与背景恢复其本身

```javascript
<style>
		.demo{
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: red;
			margin: 0 auto;
		}
	</style>
	var box = document.getElementsByClassName('demo')[0];
	 box.onmouseenter = function(){
	 	this.style.height = "200px";
	 	this.style.width = "200px";
	    this.style.backgroundColor = 'black';
	 } 
	 box.onmouseleave = function(){
	 	this.style.height = "100px";
	 	this.style.width = "100px";
	 	 this.style.backgroundColor = 'red';
	 	

	 }

在这里插入图片描述

onmousemove 鼠标移动事件的一个小案例：(永远得不到的花)

//设计此游戏的对象
 var game = {
 	//获取游戏的主角 div
 	div: null,
 	PSIZE:0,//保存div的大小
 	//保存终于最大的top和left的值
 	MAXTOP:0,MAXLEFT:0,
 	init(){
 		//找到id为pop的div保存在div属性中
 		this.div = document.getElementById("pop");
 		//获取div的宽度 计算出一个div的大小 转换为浮点数
 		this.PSIZE = parseFloat(getComputedStyle(this.div).width);
 		console.log(this.PSIZE);
 		// 计算出MAXTOP
 		this.MAXTOP = innerHeight - this.PSIZE;
 		this.MAXLEFT = innerWidth - this.PSIZE;
 		// 随机生成一个top left 保存在变量posi中，将其设置为div的位置
 		this.setPosi(this.radmonPosition());
 		// 为div绑定鼠标进入事件
 		this.div.onmousemove = function (e){
 			// 反复的计算随机位置
 			while (true) {
 				// 随机生成一个posi
 				var posi = this.radmonPosition();
 				// 得到鼠标相对于文档显示区位置
 				 var x = e.clientX,
 				     Y = e.clientY;
 				// 只要新的值不包含x和y的位置
 				if (!(x >= posi.left && x <= posi.left + this.PSIZE && y >= posi.top && y<= posi.top + this.PSIZE )) {
 					this.setPosi(posi);
 					// 退出循环
 					break;
 				}
 			}
 		}.bind(this);//this -》  game
 	},
 	setPosi(posi){//将随机生成的posi设置为div的位置
 		//设置div的top为posi的top + px
 		this.div.style.top = posi.top + "px";
 		//设置div的left为posi的left + px;
 		this.div.style.left = posi.left + "px"; 

 	},
 	radmonPosition(){//随机生成 top  和 left 
 		return{
 			//top：0~MAXTOP之间的随机整数
 			top:Math.floor(Math.random()*(this.MAXTOP + 1)),
 			//left:0~MAXLEFT之间的随机整数
 			left:Math.floor(Math.random()*(this.MAXLEFT + 1)),

 		}

 	}

 }
 game.init();

在这里插入图片描述

onmouseover、onmouseout与onmouseenter、onmouseleave区别

onmouseover、onmouseout：（冒泡）
鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父级有的东西，子级也有）
onmouseenter、onmouseleave：（不冒泡）
鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
以上个事件两两配对使用，onmouseover、onmouseout一对，onmouseenter、onmouseleave一对，不要混合使用。

onmousemove与onmouseover的区别

时间上： onmousemove 事件触发后，再触发 onmouseover 事件。
动作上：onmouseover 只在刚进入区域时触发；
onmousemove 除了刚进入区域触发外，在区域内移动鼠标，也会触发该事件。
当鼠标移动很快时，可能不会触发这两个事件。
onmouseover与onmousemove的区别是：
当鼠标移过当前对象时就产生了onmouseover事件（onmouseover有个移入移出的过程）,当鼠标在当前对象上移动时就产生了 onmousemove事件，只要是在对象上移动而且没有移出对象的，就是onmousemove事件