当鼠标移动时获取位置坐标

weixin_51958409

于 2020-11-27 10:17:58 发布

阅读量515

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_51958409/article/details/110222623

版权

	<style>
		#are{
			width: 300px;
			height: 50px;
			border: 1px solid #0000FF;
			margin-bottom:10px;
		}
		#showMsg{
			width: 300px;
			height: 20px;
			border: 1px solid #FF00FF;
		}
	</style>
	<div id="are"></div>
	<div id="showMsg"></div>
	/*
		事件对象
	*/
	<script type="text/javascript">
		// 获取div
		var are = document.getElementById("are")
		var showMsg = document.getElementById("showMsg")
		
		// 鼠标移动事件
		are.onmousemove = function(event){
			console.log(event)
				
			// 兼容浏览器
			event = event || window.event
			
			var x = event.clientX
			var y = event.clientY
			
			showMsg.innerHTML = "x:"+x+"y:"+y
		}
			
	</script>