鼠标定位第一章:获取鼠标在页面中的位置

最新推荐文章于 2024-08-22 08:56:59 发布

优资园

最新推荐文章于 2024-08-22 08:56:59 发布

阅读量1.4k

点赞数 1

分类专栏： ES5 文章标签：鼠标在页面中的位置 pageX 鼠标定位鼠标位置

本文链接：https://blog.csdn.net/zshsats/article/details/89332942

版权

ES5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

兼容性写法:
效果:

在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<script>

    document.body.onclick =function (ev) {


        var p = getPoint(ev);
        console.log("x轴坐标:"+p.x+"y轴坐标:"+p.y);

    }
    //获取鼠标在页面中的位置
    function getPoint(event) {
        var posx = 0,posY = 0;
        var event = event || window.event;
        if(event.pageX || event.pageY){
            posx = event.pageX;
            posY = event.pageY;
        }else if(event.clientX || event.clientY){
            posx = event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
            posY = event.clientY+document.documentElement.scrollTop+document.body.scrollTop;
        }
        return {
            x:posx,
            y:posY
        };
    }

</script>
</body>
</html>