一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY

Posted 只会一点前端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY相关的知识，希望对你有一定的参考价值。

一. 客户区坐标位置（clientX，clientY）

鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象的clientX和clientY属性中，所有浏览器都支持这两个属性。

我们知道了这个位置信息我们可以做些什么了？举个例子，有时候我们需要获取鼠标在某一个元素中的相对位置，做一些事情，比如自定义拖动条。

案例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div.container {
            position: relative;
            height: 20px;
            width: 400px;
            border-radius: 20px;
            margin: 100px auto;
            background-color: red;
        }

        div.scrollbar {
            position: absolute;
            height: 40px;
            left: -20px;
            top: -10px;
            width: 40px;
            border-radius: 50%;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="scrollbar"></div>
    </div>
    <script>
        var container = document.querySelector(‘.container‘);
        var scrollbar = document.querySelector(‘.scrollbar‘);
        // 计算容器的offsetLeft
        var _left = container.offsetLeft;
        // 边界判断
        var leftMin = -scrollbar.clientWidth / 2;
        var leftMax = container.clientWidth - scrollbar.clientWidth / 2;
        scrollbar.onmousedown = function () {
            document.onmousemove = function (e) {
                // 得到鼠标想对于容器container的左侧坐标
                var left = e.clientX - _left;
                left = Math.min(Math.max(leftMin, left), leftMax);
                scrollbar.style.left = left + ‘px‘;
            }
            document.onmouseup = function () {
                this.onmousemove = null;
            }
        }
    </script>
</body>

</html>

像这样子就实现了一个简易的拖动条（还需要优化，但是思路就是上面展现的思路）。

二. 页面坐标位置（pageX，pageY）

pageX和pageY两个属性代表鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。在没有滚动的情况下，clientX和cilentY与pageX和pageY是相等的。在IE8及更早版本中是没有这个两个属性的，但是我们可以根据滚动信息和客户区坐标位置信息计算出来，下面给出兼容写法：

   var getPage = function (e) {
            var clientx = e.clientX;
            var clienty = e.clientY;
            var pagex = e.pageX;
            var pagey = e.pageY;
            if (!pagex) {
                pagex = clientx + (document.documentElement.scrollLeft || document.body.scrollLeft);
            }
            if (!pagey) {
                pagey = clienty + (document.documentElement.scrollTop || document.body.scrollTop);
            }
            return {
                pageX: pagex,
                pageY: pagey
            }
        }
        var div = document.querySelector(‘.myDiv‘);
        div.onclick = function (e) {
            getPage(e);
        }

 三. 屏幕坐标位置

鼠标事件发生的时候，不仅仅会有相对于浏览器的窗口，还有一个相对于整个电脑屏幕的位置。通过事件对象中的screenX和screenY属性就可以获得相关的属性信息。

看一段代码：

  var div = document.querySelector(‘.myDiv‘);
        div.onclick = function (e) {
            console.log(e.screenX);
            console.log(e.screenY);
        }

这样就获取了相对于电脑屏幕的位置信息。

以上是关于一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY的主要内容，如果未能解决你的问题，请参考以下文章

Firefox 中的拖动事件没有 e.clientX 或 e.clientY

如何在Firefox上的“拖动”事件处理程序中使用clientX和clientY？

clientX 和 clientY 从真实坐标偏移

Chrome for Android 的错误 clientX 和 clientY 行为的解决方法是啥？

JS.clientX 鼠标坐标

event事件对象和clientX,clientY