jQuery | event.pageX 属性与示例(1)

📌 相关文章

📜 jQuery | event.pageX 属性与示例(1)

📅 最后修改于: 2023-12-03 14:43:15.125000 🧑 作者: Mango

jQuery | event.pageX 属性与示例

简介

在jQuery中，event.pageX属性是一个常见的事件属性，用于获取当前事件相对于文档左侧边缘的位置（即水平位置），以像素为单位。

使用方法

event.pageX属性需要在事件处理程序中使用，常见的事件包括鼠标事件、触摸事件等。可以通过以下代码来获取event.pageX的值：

$(document).on('mousedown', function(event) {
  console.log(event.pageX);
});

上述代码表示当用户点击文档时，获取当前鼠标相对于文档左侧边缘的位置并输出到控制台。

示例

以下是一个包含鼠标移动效果的示例，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mouse move with jQuery</title>
    <style>
      #box {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: blue;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function() {
        $(document).on('mousemove', function(event) {
          $('#box').css('left', event.pageX + 'px');
        });
      });
    </script>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

以上代码中，鼠标移动时，移动div元素的位置，使其跟随鼠标移动。其中，event.pageX属性用于获取当前鼠标相对于文档左侧边缘的位置，并将其赋值给div元素的left属性。

小结

event.pageX是jQuery中一个常用的事件属性，用于获取当前事件相对于文档左侧边缘的位置，可用于鼠标事件、触摸事件等场景。通过示例，我们可以更好地了解和应用这一属性。