JS基础-事件对象-获取鼠标指向的坐标-尚硅谷-P111

最新推荐文章于 2023-08-16 16:47:53 发布

比目鱼～

最新推荐文章于 2023-08-16 16:47:53 发布

阅读量143

点赞数

分类专栏： JS 文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/qq_43624193/article/details/122720880

版权

JS 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

视频链接
视频
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件对象</title>
		<style type="text/css">
			#areadiv{
				width: 300px;
				height: 600px;
				background-color: #6495ED;
				border: #ADFF2F;
			}
			#showMsg{
				width: 100px;
				height: 100px;
				background-color: #ADFF2F;
			}
		
		</style>
		<script type="text/javascript">
		window.onload=function(){
			var areadiv=document.getElementById("areadiv");
			var showMsg=document.getElementById("showMsg");
			/**
			 * onmousemove 该事件会在鼠标元素中移动的次数
			 */
			/**
			 * 事件对象
			 * -当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
			 * -当事件对象中封装了当前事件相关的一切信息，比如，鼠标的坐标 键盘哪个按键被按下，鼠标滚轮滚动的方向
			 */
			/**
			 * clientX可以获取鼠标的水平坐标
			 * clientY可以获取鼠标的垂直坐标
			 */
			areadiv.onmousemove=function(event){
				//考虑兼容性问题
				// if(!event){
				// 	event=window.event;
				// }
				event=event||window.event;
				var x=event.clientX;
				var y=event.clientY;
				//alert("x="+x+",y="+y);
				showMsg.innerHTML="x="+x+",y="+y;//不兼容IE8
			};
			
		};
		</script>
	</head>
	<body>
		<div id="areadiv"></div>
		<div id="showMsg"></div>
		
	</body>
</html>

比目鱼～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础-事件对象-获取鼠标指向的坐标-尚硅谷-P111

视频链接视频代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>事件对象</title> <style type="text/css"> #areadiv{ width: 300px; height: 600px; background-color: #6495ED; border: #ADFF2
复制链接

扫一扫