Event事件学习实用路线（7）——Event事件之事件鼠标信息——案例：实现鼠标跟随

最新推荐文章于 2022-11-24 08:58:26 发布

溜_x_i_a_o_迪

最新推荐文章于 2022-11-24 08:58:26 发布

阅读量280

点赞数

分类专栏： # JS——Event事件原生JavaScript Web前端文章标签： js javascript html event 前端

本文链接：https://blog.csdn.net/u013946061/article/details/105754228

版权

原生JavaScript 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

Web前端

32 篇文章 0 订阅

订阅专栏

JS——Event事件

11 篇文章 0 订阅

订阅专栏

Event事件之事件鼠标信息——案例：实现鼠标跟随

鼠标位置获取

鼠标位置获取

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
        }
        p{
            width: 100px;
            height: 100px;
            background: blue;
            margin: 50px;
        }
        body{
            border: 1px solid red;
        }
    </style>
</head>
<body style="height: 3000px;">
    <div>
        <p></p>
    </div>
    <script>
       document.addEventListener('click',function(e){
            console.log(e);
       });
    </script>
</body>
</html>

在这里插入图片描述
鼠标事件信息中以下是我们经常用到的属性。

e.clientX 和 e.clientY

    document.addEventListener('click',function(e){
         console.log(e.clientX ,e.clientY);
    });

e.clientX 和 e.clientY获取鼠标点击的位置，对应就是x和y的坐标值，这里是指相对于显示区域的位置，因此就算是滚动滚动条，界面的位置也是定死的。
在这里插入图片描述

e.pageX 和 e.pageY

    document.addEventListener('click',function(e){
         console.log(e.pageX,e.pageY);
    });

e.pageX 和 e.pageY获取鼠标点击的位置，对应就是x和y的坐标值，这里是指相对于页面左上角位置，因此滚动滚动条，页面的坐标值会随着页面的滚动而变大。
在这里插入图片描述

e.clientX 、e.clientY 和 e.pageX 、 e.pageY的区别：

　　一个相对于显示区域的位置，另一个相对于页面左上角位置。

案例：实现鼠标跟随

e.clientX 、e.clientY实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body style="height: 3000px;">
    <div></div>
    <script>

        var div=document.querySelector('div');
        // 鼠标移动过程 - mousemove
       document.addEventListener('mousemove',function(e){
 

         div.style.left=e.clientX+'px';
         div.style.top=e.clientY+'px';
       })
    </script>
</body>
</html>

我们发现div只能在最开始的显示区域上跟随，如果向下滚动滚动条，div就逐渐消失了。
在这里插入图片描述

e.pageX 、 e.pageY实现

     var div=document.querySelector('div');
     // 鼠标移动过程 - mousemove
    document.addEventListener('mousemove',function(e){

     div.style.left=e.pageX+'px';
      div.style.top=e.pageY+'px';
    })

我们发现此时div会一直跟着鼠标移动了。
在这里插入图片描述
总之，再通过案例，我们更能清晰分辨出e.clientX 、e.clientY 和 e.pageX 、 e.pageY的区别了。

（后续待补充）

溜_x_i_a_o_迪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Event事件学习实用路线（7）——Event事件之事件鼠标信息——案例：实现鼠标跟随

鼠标位置获取鼠标事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
复制链接

扫一扫