获取鼠标坐标 clientX clientY 事件属性

最新推荐文章于 2024-10-25 09:32:27 发布

原创最新推荐文章于 2024-10-25 09:32:27 发布 · 974 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #文档 #ie

Html 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了clientX和clientY事件属性的定义与用法，详细解释了如何获取鼠标指针相对于浏览器页面的位置坐标，并通过示例展示了如何在JavaScript中使用这些属性来显示鼠标坐标的实时信息。

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



 定义和用法
 clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
 客户区指的是当前窗口。
 语法
 event.clientX

提示和注释

注释：2 级 DOM 没有提供把窗口坐标转换为文档坐标的标准方法。在 IE 以外的浏览器，使用 window.pageXOffset 和 window.pageYOffset 即可。

实例

下面的例子可显示出事件发生时鼠标指针的坐标：

<html>
<head>
<script type="text/javascript">
function show_coords(event)
  {
  x=event.clientX
  y=event.clientY
  alert("X coords: " + x + ", Y coords: " + y)
  }
</script>
</head>

<body οnmοusedοwn="show_coords(event)">
	
	<p>Click in the document. An alert box will alert 
the x and y coordinates of the mouse pointer.</p>

</body>
</html>

TIY

clientX

显示鼠标指针的坐标。

ClientY 事件属性

返回 Event 对象参考手册

定义和用法

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。

客户区指的是当前窗口。

语法

event.clientY

提示和注释

注释：注意，该坐标不考虑文档的滚动。如果事件发生在窗口的顶部，无论文档滚了多远，clientY 的值都是 0。但是，2 级 DOM 没有提供把窗口坐标转换为文档坐标的标准方法。在 IE 以外的浏览器，使用 window.pageXOffset 和 window.pageYOffset 即可。

实例

下面的例子可显示出事件发生时鼠标指针的坐标：

<html>
<head>
<script type="text/javascript">
function show_coords(event)
  {
  x=event.clientX
  y=event.clientY
  alert("X coords: " + x + ", Y coords: " + y)
  }
</script>
</head>

<body οnmοusedοwn="show_coords(event)">
	
<p>Click in the document. An alert box will alert 
the x and y coordinates of the mouse pointer.</p>

</body>
</html>

TIY

clientY

显示鼠标指针的坐标