使用JS中的鼠标移动和鼠标移除事件实现简单的画图工具

程序员文章站 2022-06-24 19:42:53

...

在画图工具中，当我们移动鼠标时，左下角会显示相应的x，y坐标；当我们移出鼠标时，左下角的内容会消失。
现，我们通过JS中的onmousemove()以及onmouseout()事件，来简单地实现此功能。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				position: relative;
				background-color: #cecece;
				height: 500px;
				width: 500px;
			}
			
			span{
				position: absolute;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div>
			<span></span>
		</div>
		
		<script>
			var oDiv=document.getElementsByTagName('div')[0];
			var oSpan=document.getElementsByTagName('span')[0];
			oDiv.onmousemove=function(e){
				var evt=e||event;
				var x=evt.clientX;
				var y=evt.clientY;
				oSpan.innerHTML=x+","+y+"px";
			}
			
			oDiv.onmouseout=function(){
				oSpan.innerHTML="";
			}
		</script>
	</body>
</html>