案例：获取鼠标在盒子内的坐标

最新推荐文章于 2024-04-01 13:53:31 发布

_Tough_Girl

最新推荐文章于 2024-04-01 13:53:31 发布

阅读量915

点赞数 1

分类专栏： JavaScript 案例文章标签： javascript html5 html

本文链接：https://blog.csdn.net/icemwj/article/details/120437190

版权

JavaScript 案例专栏收录该内容

22 篇文章 6 订阅

订阅专栏

案例：获取鼠标在盒子内的坐标

需求： 我们在盒子内移动鼠标，想要得到鼠标距离盒子左右的距离。
在这里插入图片描述

案例分析:

① 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。

② 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）。

③ 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)。

④ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标。

⑤ 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件 mousemove。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例：计算鼠标在盒子内的坐标</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 200px;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        var box = document.querySelector('.box');
        box.addEventListener('mousemove', function (e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x的坐标是' + x + ' y的坐标是' + y;
        });
    </script>
</body>

</html>

_Tough_Girl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例：获取鼠标在盒子内的坐标

案例：获取鼠标在盒子内的坐标需求：我们在盒子内移动鼠标，想要得到鼠标距离盒子左右的距离。案例分析:① 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。② 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）。③ 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)。④ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标。⑤ 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件 mousemove。代码：<!
复制链接

扫一扫