获取鼠标坐标常用方法

最新推荐文章于 2023-07-04 23:05:56 发布

yuan溜溜

最新推荐文章于 2023-07-04 23:05:56 发布

阅读量3.1k

点赞数 1

本文链接：https://blog.csdn.net/YMX2020/article/details/106795668

版权

获取鼠标坐标常用方法

offsetX/offsetY，鼠标点击位置离事件元素边框的距离，事件元素左上角坐标为（0，0）
clientX/clientY，鼠标点击位置相对于浏览器（这里说的是浏览器的有效区域）的距离，不包含滚动距离
pageX/pageY，clientX/Y+横/纵向滚动的距离

<!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></title>
</head>
<style>
    body{
        margin: 0px;
    }
    .getInfo{
        width: 200px;
        height: 220px;
        background-color: #bae9d9;
        border: 4px solid pink;
        margin: 10px 5px 8px 20px;
        padding: 7px 15px;
    }
</style>

<body>
    <div class="getInfo"> </div>
</body>
<script>
    let getInfo = document.getElementsByClassName('getInfo')[0]
   getInfo.onmousedown = function(e){
        // console.log(e)
        // 事件元素左上角坐标为，不包含边框出坐标（0，0）
        // 左上，不包含边框（0，0），右上，不包含边框（230，0）
        // 左下，不包含边框（0，234），右下，不包含边框（230，234）
        // console.log(e.offsetX, e.offsetY);  

        // 左上，不包含边框（24，14），右上，不包含边框（254，14）
        // 左下，不包含边框（24，248），右下，不包含边框（25y4，248）
        // console.log(e.clientX, e.clientY);  

        // 左上，不包含边框（24，14），右上，不包含边框（254，14）
        // 左下，不包含边框（24，248），右下，不包含边框（254，248）
        // pageX = clientX+横向滚动的距离
        // pageY = clientY+纵向滚动的距离
        // console.log(e.pageX, e.pageY);  

   }
</script>
</html>

yuan溜溜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取鼠标坐标常用方法

获取鼠标坐标常用方法offsetX/offsetY，鼠标点击位置离事件元素边框的距离，事件元素左上角坐标为（0，0）clientX/clientY，鼠标点击位置相对于浏览器（这里说的是浏览器的有效区域）的距离，不包含滚动距离pageX/pageY，clientX/Y+横/纵向滚动的距离<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
复制链接

扫一扫