jQuery获取鼠标的坐标位置

小程、

已于 2022-08-31 15:17:45 修改

阅读量3.9k

点赞数 2

分类专栏： JQ 文章标签： jquery javascript ecmascript

于 2022-08-31 11:19:47 首次发布

本文链接：https://blog.csdn.net/cheng1a/article/details/126620198

版权

JQ 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery获取鼠标的坐标位置

这里用到两个属性：event.pageX和event.pageY

event.pageX：该属性返回鼠标指针的位置，相对于文档的左边缘;该事件属性通常与event.pageY属性一起使用

event.pageY：该属性返回鼠标指针的位置，相对于文档的上边缘;该事件属性通常与event.pageX属性一起使用

通过这两个属性，可以确定元素在当前页面的坐标值，鼠标相对以文档的左边缘的位置（左边）与（顶边）的距离，简单来说就从页面的左上角开始，即是以页面为参考点，不随滑动条移动而变化；

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery获取鼠标坐标位置</title>
    <style type="text/css">
        html,body{
            height: 100%;
        }
    </style>
    <!-- 引入jquery -->
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 监听鼠标移动事件
            $("body").mousemove(function(event){
                // 获取坐标
                var coordinate = "("+event.pageX+","+event.pageY+")";
                // 将坐标赋值到span标签显示
                $(".coordinate") . text(coordinate);
            });
        })
    </script>
</head>
<body>
    <p>当前鼠标的坐标为：<span class="coordinate"></span></p>
</body>
</html>

最终实现效果如下：

在这里插入图片描述

用户把鼠标移动一个像素，就会发生一次 mousemove 事件，处理所有 mousemove 事件会耗费系统资源，请谨慎使用该事件；
如需获取鼠标点击时的位置坐标将鼠标移动事件换为点击事件即可；同理其他事件也是如此；

小程、

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery获取鼠标的坐标位置

jQuery获取鼠标的坐标位置这里用到两个属性：event.pageX和event.pageYevent.pageX：该属性返回鼠标指针的位置，相对于文档的左边缘;该事件属性通常与event.pageY属性一起使用event.pageY：该属性返回鼠标指针的位置，相对于文档的上边缘;该事件属性通常与event.pageX属性一起使用通过这两个属性，可以确定元素在当前页面的坐标值，鼠标相对以文档的左边缘的位.........
复制链接

扫一扫

专栏目录