JavaScript系列(三):offsetX, clientX, pageX, screenX

直奔主题

开篇一张图,内容全靠编。

image

offsetXclientXpageXscreenX这些属性是用来获取不同参照物的鼠标坐标,之前对这里比较疑惑,所以花了一点点时间看这玩意。

从上图可以看到,offsetX的参考物是当前元素,clientX的参照物是网页的可视区域,意思是不考虑滚动条滚动的长度,pageX参照的是页面内容,这个是考虑clientX不考虑的事情,所以它的长度等于clientX + 滚动条滚动的长度,screenX的参照物是电脑屏幕。

测试代码

<!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('offset:', ev.offsetX, ev.offsetY);
            console.log('client:', ev.clientX, ev.clientY);
            console.log('page:', ev.pageX, ev.pageY);
            console.log('screen:', ev.screenX, ev.screenY);
        }
    }

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

Jquery 兼容写法

Jquery event 事件对象,包含有 event.offsetXevent.clientXevent.pageXevent.screenX等属性(firefox 浏览器中, offsetXundefined)。firefox 获取 offsetX / offsetY 的值,需要通过 event 对象的属性 originalEvent

Last modification:March 2nd, 2018 at 10:05 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment