一. 客戶區坐標位置（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);
        }

這樣就獲取了相對於電腦屏幕的位置信息。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的區別元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY screenX clientX pageX的區別 screenX clientX pageX的區別 JavaScript 中一些概念理解：clientX、clientY、offsetX、offsetY、screenX、screenY Js event對象offsetX，pageX，screenX，clientX詳解 javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX 理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY screenX,clientX,pageX,offsetX,pageXoffset的區別關於鼠標事件的screenY,pageY,clientY,layerY,offsetY屬性（詳細圖解）