鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

前言

在网页开发中，我们经常需要获取鼠标相对于页面或元素的位置信息，以便进行一些交互操作。为了更准确地获取鼠标的位置，网页开发中提供了多个属性，如screenY,pageY,clientY,layerY,offsetY。本文将对这些属性进行详细讲解，以帮助开发者更好地理解它们的用途和区别。

screenY

screenY属性返回鼠标相对于屏幕的垂直位置，以像素为单位。

示例1：

<!DOCTYPE html>
<html>
<head>
  <title>screenY示例</title>
</head>
<body>
  <div onmousemove="showPosition(event)">
    鼠标位置：<span id="pos"></span>
  </div>

  <script>
    function showPosition(event) {
      document.getElementById("pos").innerHTML = event.screenY;
    }
  </script>
</body>
</html>

在上面的示例中，我们监听了一个div元素的鼠标移动事件，并显示了鼠标的垂直位置。当您在页面上移动鼠标时，屏幕上将显示当前鼠标的垂直位置。

pageY

pageY属性返回鼠标相对于页面的垂直位置，以像素为单位。与screenY属性不同，pageY属性只考虑页面内容的高度，而不考虑浏览器的工具栏、滚动条等高度。

示例2：

<!DOCTYPE html>
<html>
<head>
  <title>pageY示例</title>
</head>
<body>
  <div style="height: 2000px;" onmousemove="showPosition(event)">
    鼠标位置：<span id="pos"></span>
  </div>

  <script>
    function showPosition(event) {
      document.getElementById("pos").innerHTML = event.pageY;
    }
  </script>
</body>
</html>

在上面的示例中，我们将一个div元素的高度设置为2000像素，以便让页面有滚动条。当您在页面上移动鼠标时，页面上将显示当前鼠标的垂直位置。

clientY

clientY属性返回鼠标相对于浏览器窗口的垂直位置，以像素为单位。与pageY属性不同，clientY属性只考虑可视区域的高度，而不考虑页面的滚动条高度。

示例3：

<!DOCTYPE html>
<html>
<head>
  <title>clientY示例</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #container {
      height: 100vh;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div id="container" onmousemove="showPosition(event)">
    鼠标位置：<span id="pos"></span>
  </div>

  <script>
    function showPosition(event) {
      document.getElementById("pos").innerHTML = event.clientY;
    }
  </script>
</body>
</html>

在上面的示例中，我们将一个div元素的高度设置为页面高度，以便让页面没有滚动条。当您在页面上移动鼠标时，页面上将显示当前鼠标的垂直位置。

layerY

layerY属性返回鼠标相对于触发事件的元素的顶部边缘的位置，以像素为单位。如果鼠标事件没有在元素上发生，而是在元素的子元素上发生，则返回鼠标相对于最近的定位祖先元素的位置。

示例4：

<!DOCTYPE html>
<html>
<head>
  <title>layerY示例</title>
  <style>
    #container {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div id="container" onmousemove="showPosition(event)">
    鼠标位置：<span id="pos"></span>
  </div>

  <script>
    function showPosition(event) {
      document.getElementById("pos").innerHTML = event.layerY;
    }
  </script>
</body>
</html>

在上面的示例中，我们创建了一个div元素，并将其定位为相对定位。当您在div元素上移动鼠标时，页面上将显示当前鼠标的相对位置。

offsetY

offsetY属性返回鼠标相对于触发事件的元素的顶部内边距的位置，以像素为单位。如果鼠标事件没有在元素上发生，而是在元素的子元素上发生，则返回鼠标相对于最近的有定位的祖先元素的位置。

示例5：

<!DOCTYPE html>
<html>
<head>
  <title>offsetY示例</title>
  <style>
    #container {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div id="container" onmousemove="showPosition(event)">
    鼠标位置：<span id="pos"></span>
  </div>

  <script>
    function showPosition(event) {
      document.getElementById("pos").innerHTML = event.offsetY;
    }
  </script>
</body>
</html>

在上面的示例中，我们创建了一个div元素，并将其定位为相对定位。当您在div元素上移动鼠标时，页面上将显示当前鼠标的相对位置。