JavaScript 将事件event作为参数传递，鼠标移动事件

最新推荐文章于 2025-03-25 21:42:58 发布

houyanhua1

最新推荐文章于 2025-03-25 21:42:58 发布

阅读量5.3k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/78468564

版权

JavaScript 专栏收录该内容

140 篇文章

订阅专栏

这篇博客介绍了一个使用JavaScript处理鼠标移动事件的例子。通过将事件event作为参数传递到函数fn中，获取并显示鼠标在页面上的坐标。示例中，当鼠标在id为'd1'的黑色div上移动时，div的内容会更新为鼠标的x和y坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>网页标题</title>
	<meta name="keywords" content="关键字列表" />
	<meta name="description" content="网页描述" />
	<link rel="stylesheet" type="text/css" href="" />
	<style type="text/css">
		#d1{
			background-color:black;
			height:300px;
			color:white;
			cursor:crosshair;  /* 表示鼠标的形状 */
		}
	</style>
	<script type="text/javascript">
			function fn(e){    //将事件event作为参数传递
				var x=e.clientX;  //获取鼠标事件的坐标
				var y=e.clientY;
				var obj=document.getElementById("d1");//获得id为d1的对象
				obj.innerHTML=x+","+y;   //设置双标签的innerHTML。
			}
	</script>
</head>
<body>
<div id="d1" οnmοusemοve="fn(event)">  <!--将鼠标移动事件event作为参数传递-->
 这是innerHTML		
</div>
</body>
</html>