博客

jQuery event.pageY属性

  • Post category:jquery

jQuery event.pageY属性是用于获取事件发生时鼠标指针相对于文档顶部边缘的垂直位置的属性。该属性可以用于在事件处理程序中获取鼠标指针的位置，以便据此执行其他操作。

以下是jQuery event.pageY属性的详细攻略：

语法

event.pageY

参数

无

示例1：鼠标指针的垂直位置

以下示例演示了如何使用jQuery event.pageY属性获取鼠标指针的垂直位置：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.pageY Property</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv" style="width: 200px; height: 200px; background-color: #;"></div>

  <script>
    $(document).ready(function() {
      $('#myDiv').on('mousemove', function(event) {
        var y = event.pageY;
        console.log('Mouse Y position: ' + y);
      });
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个div元素，并使用jQuery event.pageY属性在mousemove事件处理程序中获取鼠标指针的垂直位置。当鼠标在div元素上移动时，我们将鼠标指针的垂直位置输出到控制台。

示例2：使用鼠标指针的垂直位置执行其他操作

以下示例演示了如何使用jQuery event.pageY在事件处理程序中使用鼠标指针的垂直位置执行其他操作：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.pageY Property</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv" style="width: 200px; height: 200px; background-color: #ccc;"></div>

  <script>
    $(document).ready(function() {
      $('#myDiv').on('mousemove', function(event) {
        var y = event.pageY;
        if (y > 100) {
          $(this).css('background-color', 'red');
        } else {
          $(this).css('background-color', '#ccc');
        }
      });
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个div元素使用jQuery event.pageY属性mousemove事件处理程序中获取鼠标指针的垂直位置。当鼠标指针的垂直位置大于100时，我们将div元素的背景颜色设置为红色，否则将其设置为灰色。

注意事项

  • jQuery event.pageY属性返回一个整数，表示鼠标指针相对于文档顶部边的垂直位置。
  • jQuery event.pageY属性只能在鼠标事件处理程序中使用，例如mousemove、mousedown、mouseup等事件。
Tags: