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

兼容性写法:
效果:

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

<!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>

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

相关推荐