📌  相关文章
📜  HTML | DOM MouseEvent clientY 属性(1)

📅  最后修改于: 2023-12-03 15:01:11.975000             🧑  作者: Mango

HTML | DOM MouseEvent clientY 属性

简介

MouseEvent的clientY属性返回触发事件的鼠标指针的纵坐标。clientY属性与clientX属性一起提供了鼠标指针位置的坐标。

语法
event.clientY

参数说明：

  • event - 必须，表示触发该事件的鼠标事件。
返回值

clientY属性的值为鼠标指针相对于事件源的顶部位置，以像素为单位。值可以是任何整数，包括负数。

示例
<!DOCTYPE html>
<html>
<body>

<h1 onclick="showCoords(event)">点击这里以显示鼠标指针的位置</h1>

<script>
function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  alert("鼠标指针的位置是: " + x + ", " + y);
}
</script>

</body>
</html>

以上代码会在点击文本时调用showCoords函数，并弹出一个显示当前鼠标光标位置的弹出窗口。

其他注意事项
  • clientY属性返回的值不包括水平滚动条的位置，即使它被滚动。
  • 如果想相对于文档的顶部位置，而非事件源，获取鼠标指针位置，请使用pageY属性。