常用的鼠标事件（event）

最新推荐文章于 2024-08-21 23:10:49 发布

狗焕sama

最新推荐文章于 2024-08-21 23:10:49 发布

阅读量1.3k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_42376204/article/details/104907458

版权

JS 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

常见的鼠标事件
在这里插入图片描述
client：相对于浏览器可视区的坐标。（能看见的范围，无论你如何下拉翻页）

page：相对于整个文档。即相对于整个页面的x，y轴坐标（距离）
screen：相对于整个电脑屏幕的坐标

实现图片跟图片一起移动功能

onmousemove：鼠标移动
注意：一定不要忘了位置的单位

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        img{
            position: absolute;
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
<img src="携程/2.png" alt="">
<script>
    var img = document.querySelector('img');
    document.addEventListener('mousemove',function (e) {
        img.style.top = e.pageY + 'px';//一定不要忘了单位
        img.style.left = e.pageX + 'px';
    })

</script>