JavaScript-DOM事件对象

js-dom-鼠标拂过显示坐标事件

onmousemove:鼠标移动事件.
clientX:当事件被触发时,可以获取当前可见区域鼠标指针的水平坐标.
cilentY:当事件被触发时,可以获取当前可见区域鼠椟指针的垂直坐标.
pageX:获取鼠标相对于当前页面的水平坐标.(IE8及以下不支持)
pageY:获取鼠标相对于当前页面的垂直坐标.

功能快捷键

撤销:Ctrl + Z

图片示例

图片: 在这里插入图片描述

代码示例

代码片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标拂过显示坐标事件</title>
		<style type="text/css">
			#areaDiv{
    
    
				width: 600px;
				height: 80px;
				border: 2px solid black;
			}
			#showMsg{
    
    
				width: 580px;
				height: 40px;
				margin-top: 10px;
				padding: 10px;
				border: 2px solid black;
			}
		</style>
		<script type="text/javascript">
			/*当鼠标在areaDiv中移动时,在showMsg中来显示鼠标的坐标*/
			window.onload = function(){
    
    
				
				//获取两个div
				var areaDiv = document.getElementById("areaDiv");
				var showMsg = document.getElementById("showMsg");
				
				//areaDiv鼠标移动事件
				areaDiv.onmousemove = function(event){
    
    
					
					/*解决事件兼容性问题*/
					//第一种写法:
					/*if(!event){
						event = window.event;
					}*/
					
					//第二种写法:
					//||:短路运算符,如果event = event为true ,则不执行window.event
					//如果event = event为false ,则执行window.event
					event = event || window.event;
					
					//IE8及以下都识别不出来event,所以在前面加window
					var x = event.clientX;
					var y = event.clientY;
					
					showMsg.innerHTML = "x = " + x + " , y = " + y ;
				};
			};
		</script>
	</head>
	<body>
		<div id="areaDiv"></div>
		<div id="showMsg"></div>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_46665317/article/details/108021036