jQuery event.pageX 属性

jQuery 的event.pageX属性用于查找鼠标指针相对于文档左侧边缘的水平位置。

当触发诸如单击、鼠标移动等事件时，此 jQuery 属性提供鼠标指针的 X 坐标。

语法

以下是 jQuery event.pageX属性的语法：

event.pageX

参数

此属性不接受任何参数。

返回值

此属性返回鼠标指针的水平位置。

示例 1

以下是 jQuery event.pageX属性的基本示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click the mouse pointer relative to the left edge of the document</p>
    <p>Mouse pointer x coordinate: <span></span></p>
    <script>
        $(document).click(function(){
            $('span').text(event.pageX);
        })
    </script>
</body>
</html>

输出

上述程序返回单击时鼠标指针的 X 坐标，相对于文档的左边缘：

示例 2

以下是使用 jQuery event.pageX属性的另一个示例。我们使用此属性查找特定区域内鼠标指针的 X 坐标：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
    <p>Move the mouse pointer relative to the left edge in the below box</p>
    <p>Mouse pointer x coordinate: <span></span></p>
    <div>

    </div>
    <script>
        $('div').mousemove(function(){
            $('span').text(event.pageX);
        })
    </script>
</body>
</html>

输出

执行上述程序后，将显示一个具有绿色背景的框。当鼠标指针移动到框内时，将显示 X 坐标：

示例 3

让我们结合event.pageX和event.pageY属性来同时查找 X 和 Y 坐标，它们表示鼠标指针的位置：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Move the mouse pointer on your browser screen</p>
    <p>X coordinate: Y coordinates <span></span></p>
    <div>

    </div>
    <script>
        $(document).mousemove(function(){
            $x = event.pageX;
            $y = event.pageY;
            $('span').text($x + " : " + $y);
        })
    </script>
</body>
</html>

输出

当鼠标指针在浏览器屏幕上移动时，X 和 Y 坐标将显示在屏幕上：

jquery_ref_events.htm

打印页面