JS--JavaScript使用鼠标事件（click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove）

冷不防 2021-08-13 12:47 431阅读 0赞

#### 鼠标事件 ####

<table> 
 <thead> 
  <tr> 
   <th align="center">事件类型</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">click</td> 
   <td align="center">单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上，并按了回车键时，同样会触发事件</td> 
  </tr> 
  <tr> 
   <td align="center">dblclick</td> 
   <td align="center">双击鼠标左键时发生，如果右键也按下则不会发生</td> 
  </tr> 
  <tr> 
   <td align="center">mousedown</td> 
   <td align="center">单击任意一个鼠标按钮时发生</td> 
  </tr> 
  <tr> 
   <td align="center">mouseout</td> 
   <td align="center">鼠标指针位于某个元素上，且将要移出元素的边界时发生</td> 
  </tr> 
  <tr> 
   <td align="center">mouseover</td> 
   <td align="center">鼠标指针移出某个元素，到另一个元素上时发生</td> 
  </tr> 
  <tr> 
   <td align="center">mouseup</td> 
   <td align="center">松开任意一个鼠标按钮时发生</td> 
  </tr> 
  <tr> 
   <td align="center">mousemove</td> 
   <td align="center">鼠标在某个元素上时持续发生</td> 
  </tr> 
 </tbody> 
</table>

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<p>鼠标事件</p>
    		<input type="text" id="text"/>
    		<script>
    			var p1 = document.getElementsByTagName("p")[0];
    			var t = document.getElementById("text");
    			
    			function f(){ 
    				var eve = event || window.event;
    				t.value = eve.type;
    			}
    			p1.onmouseover = f;//注册鼠标经过时事件处理函数
    			p1.onmouseout = f;//注册鼠标移开时事件处理函数
    			p1.onmousedown = f;//注册鼠标按下时事件处理函数
    			p1.onmouseup = f;//注册鼠标松开时事件处理函数
    			p1.onmousemove = f;//注册鼠标移动时事件处理函数
    			p1.onclick = f;//注册鼠标单击时事件处理函数
    			p1.ondblclick = f;//注册鼠标双击时事件处理函数
    		</script>
    	</body>
    </html>

![在这里插入图片描述][201909262216084.png]

#### 鼠标点击 ####

鼠标点击事件包括4个：click（单击）、dblclick（双击）、mousedown（按下）和mouseup（松开）。其中click事件比较常用。当这些事件处理函数返回值为false时，会禁止绑定对象的默认行为。

示例：取消超链接被单击时的跳转行为

<a name="tag" id="tag" href="https://www.baidu.com">百度</a>
    <script>
    	var a = document.getElementsByTagName("a");
    	for(var i = 0; i < a.length; i++){ 
    		a[i].onclick = function(){ 
    			return false;
    		}
    	}
    </script>

#### 鼠标移动 ####

mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢，以及浏览器跟踪更新的速度。

示例：页面元素拖放

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="box"></div>
    		<script>
    			//初始化拖放对象
    			var box = document.getElementById("box");
    			box.style.position = "absolute"; //绝对定位
    			box.style.width = "160px"; //宽度160像素
    			box.style.height = "120px"; //高度120像素
    			box.style.backgroundColor = "red"; //红色
    			
    			//初始化变量，标准化事件对象
    			var mx, my, ox, oy;
    			function e(event){ 
    				if(!event){ 
    					event = window.event;
    					event.target = event.srcElement;
    					event.layerX = event.offsetX;
    					event.layerY = event.offsetY;
    				}
    				//计算鼠标指针的x轴距离
    				event.mx = event.pageX || event.clientX + document.body.scrollLeft;
    				//计算鼠标指针的y轴距离
    				event.my = event.pageY || event.clientY + document.body.scrollTop;
    				return event;
    			}
    			
    			//定义鼠标事件处理函数
    			document.onmousedown = function(event){ 
    				event = e(event);//获取标准事件对象
    				o = event.target;
    				ox = parseInt(o.offsetLeft); //拖放元素的x轴坐标
    				oy = parseInt(o.offsetTop); //拖放元素的y轴坐标
    				mx = event.mx;		//按下鼠标指针的x轴坐标
    				my = event.my;      //按下鼠标指针的y轴坐标
    				document.onmousemove = move;
    				document.onmouseup = stop;
    			}
    			function move(event){ 
    				event = e(event);
    				o.style.left = ox + event.mx - mx + "px"; //定义拖动元素的x轴距离
    				o.style.top = oy + event.my - my + "px"; //定义拖动元素的y轴距离
    			}
    			function stop(event){ 
    				event = e(event);
    				ox = parseInt(o.offsetLeft); //记录拖放元素的x轴坐标
    				oy = parseInt(o.offsetTop);  //记录拖放元素的y轴坐标
    				mx = event.mx;	//记录鼠标指针的x轴坐标
    				my = event.my;	//记录鼠标指针的y轴坐标
    				o = document.onmousemove = document.onmouseup = null; //释放对象
    			}
    		</script>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

#### 鼠标经过 ####

鼠标经过包括**移过**和**移出**两种事件类型。当移动鼠标指针到某个元素上时，将触发mouseover事件；而当把鼠标指针移出某个元素时，将触发mouseout事件。如果从父元素中移到了子元素中时，也会触发父元素的mouseover事件类型。

示例：分别为3个嵌套的div元素定义了mouseover和mouseout事件处理函数，当从外层的父元素中移动内部的子元素中，将会触发父元素的mouseover事件类型，但是不会触发mouseout事件类型。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<div>
    			<div>
    				<div>盒子</div>
    			</div>
    		</div>
    		<script>
    			var div = document.getElementsByTagName("div");
    			for(var i = 0; i < div.length; i++){ 
    				div[i].onmouseover = function(){ 
    					this.style.border = "solid blue";
    				}
    				div[i].onmouseout = function(){ 
    					this.style.border = "solid red";
    				}
    			}
    		</script>
    	</body>
    </html>

#### 鼠标来源 ####

当一个事件发生后，可以使用事件对象的target属性获取发生事件的节点元素。如果在IE事件模型中实现相同的目标，可以使用srcElement属性。

示例：当鼠标移过页面中的div时，会弹出提示对话框，提示当前元素的节点名称

<div>div元素</div>
    <script>
    	var div = document.getElementsByTagName("div")[0];
    	div.onmouseover = function(e){ 
    		var e = e || window.event;
    		var o = e.target || e.srcElement;
    		alert(o.tagName);
    	}
    </script>

另外，在DOM事件模型中，还定义了currentTarget属性，当事件在传播过程中（如捕获和冒泡阶段）时，该属性值与target属性值不同。因此，一般在事件处理函数中，应该使用该属性而不是this关键词获取当前对象。

示例：当鼠标移动到div元素上时，会弹出“BODY”字符提示信息，说明鼠标指针是从body元素过来的；而移开鼠标指针时，又弹出“BODY“字符提示信息，说明离开元素将要移到的元素。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<div>div元素</div>
    		<p>段落</p>
    		<script>
    			var div = document.getElementsByTagName("div")[0];
    			div.onmouseover = function(){ 
    				var e = e || window .event;
    				var o = e.relatedTarget || e.fromElement;//标准化事件属性
    				alert(o.tagName);
    			}
    			div.onmouseout = function(){ 
    				var e = e || window .event;
    				var o = e.relatedTarget || e.toElement;//标准化事件属性
    				alert(o.tagName);
    			}
    		</script>
    	</body>
    </html>

![在这里插入图片描述][20190926230941658.png]

[201909262216084.png]: /images/20210813/886428c0084c4066853e418e1bd69cfa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/9f608370b51c4e998213f840b59ea8f2.png
[20190926230941658.png]: /images/20210813/59609a9724784de5a8578101f9c4ad97.png