clientX、offsetX、screenX、pageX、x的区别

 

鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

来源：https://blog.csdn.net/weixin_41342585/article/details/80659736

图片来源：https://www.cnblogs.com/deerfig/p/6432683.html

　　　　　// content
        $('.demo1').width()
        // content+padding
        $('.demo1').innerWidth();//200+100*2
        // content+padding+border
        $('.demo1').outerWidth();//200+100*2+5*2
        // content+padding+border+margin
        $('.demo1').outerWidth(true);//200+100*2+5*2+5*2
height,innerHeight(),outerHeight(),outerHeight(true)同理。
一下图片转自：https://www.imooc.com/article/17571
"clientHeight": content + padding,(注：对于inline的元素这个属性一直是0，单位px，只读元素。)
"offsetHeight": content + padding + border + 水平滚动条宽度,（对于inline的元素这个属性一直是0，单位px，只读元素。）
"scrollHeight": 
"scrollTop": 

 "offsetTop"

 

网页可见区域高：document.body.clientHeight

网页正文全文高：document.body.scrollHeight
网页可见区域高（包括边线的高）：document.body.offsetHeight
网页被卷去的高：document.body.scrollTop

屏幕分辨率高：window.screen.height

 

测试

<!DOCTYPE HTML>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <title>Javascript</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #ccc;
            font-size: 12px;
            overflow: auto
        }

        .main {
            width: 500px;
            height: 330px;
            position: relative;
            margin: 250px auto 0;
            background-color: #eee;
        }

        .box {
            position: absolute;
            width: 220px;
            height: 180px;
            background-color: orange;
            top: 80px;
            left: 80px;
        }
    </style>
</head>

<body style="height:1600px;">
    <div class="main">
        <div class="box" id="box"></div>
    </div>

    <script>
        var oBox = document.getElementById('box');

        window.onload = function () {

            oBox.onmousedown = function (ev) {
                ev = ev || window.event;

                console.log('ev.offsetX, ev.offsetY',ev.offsetX, ev.offsetY);
                console.log('ev.clientX, ev.clientY',ev.offsetX, ev.offsetY);
                console.log('ev.pageX, ev.pageY',ev.pageX, ev.pageY);
                console.log('ev.screenX, ev.screenY', ev.pageX, ev.pageY);
                console.log('ev.layerX, ev.layerY', ev.pageX, ev.pageY);
                console.log('ev.x, ev.y',ev.pageX, ev.pageY);
            }
        }

    </script>
</body>

</html>

 

 

 

posted @ 2019-05-05 19:14  芥末Yuki  阅读(446)  评论(0)  编辑  收藏  举报