網頁座標 - 了解 screen、page、client 箇中差異

Posted on In

如何偵測「目前，滑鼠的座標」呢？

我的 codepen 範例

https://codepen.io/saffranwang/full/eYmGqYw

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body id="body">
    <div class="wrap">
        <div class="header">
            <p>
                screenX: <span class="screenX"></span>
                screenY: <span class="screenY"></span>
            </p>
            <p>
                pageX: <span class="pageX"></span>
                pageY: <span class="pageY"></span>
            </p>
            <p>
                clientX: <span class="clientX"></span>
                clientY: <span class="clientY"></span>
            </p>
        </div>
    </div>

    <script src="js/all.js"></script>
    
</body>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body{
    margin: 0;
    padding: 0;
}
html{
    height: 100%;
}
.wrap{
    max-width: 1920px;
    height: 5000px;
    background-color: #404747;
    background-image: url(https://i.ibb.co/M2rjV75/dark.png);
    background-position: bottom;
    background-repeat: no-repeat;
}
.header{
    height: 150px;
    position: fixed;
    top: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    background-color: peru;
}
.header p{
    padding: 0.5em;
}

JS:

🎃 建立變數el，來選取「整個<body>」： var el = document.body;

💡 在「整個<body>」做監聽事件.addEventListener

🎃 偵測「整個<body>」的「mousemove事件」–> 當「滑鼠滑入<body>」時，就會執行「getPosition這個 function」

💡 function getPosition(e){}

🎃 在 function 中，用「參數e」來記錄所有的資訊

🎃 用console.log(e);來看：

🎃 用.textContent將「撈出的e.screenX值」帶到<span class="screenX"></span>裡面

🍋 e.screenX代表：目前所在位置的「screen 的 X 軸」
🍋 e.screenY代表：目前所在位置的「screen 的 Y 軸」

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var screenX = document.querySelector('.screenX');
var screenY = document.querySelector('.screenY');
var pageX = document.querySelector('.pageX');
var pageY = document.querySelector('.pageY');
var clientX = document.querySelector('.clientX');
var clientY = document.querySelector('.clientY');

function getPosition(e){
    screenX.textContent = e.screenX;
    screenY.textContent = e.screenY;
    pageX.textContent = e.pageX;
    pageY.textContent = e.pageY;
    clientX.textContent = e.clientX;
    clientY.textContent = e.clientY;
}

var el = document.body;
el.addEventListener('mousemove',getPosition,false);

這樣，就可以分別偵測到

  • screenX
  • screenY
  • pageX
  • pageY
  • clientX
  • clientY

❓ 「screen, page, client」有什麼差異呢？

screen

🎃 screen：”滑鼠“在「整個電腦螢幕」的位置

🍋 假設我的電腦螢幕解析度是「1920 * 1080」，「screen」所偵測的「座標範圍」就不會超出「1920 * 1080」

🍋 把網頁滾輪滾到最上方（紅色箭頭處），把滑鼠移動到畫面左上角（綠色箭頭處）：

  • 只有「screenX, screenY」的座標是「49, 231」
  • 「page, client」的座標都是 0

page

🎃 page：”滑鼠“在「整個網頁」的位置

🍋 「page」偵測的是：瀏覽器裡面的「網頁」

🍋 把網頁滾輪往下滾（紅色箭頭處），同樣是把滑鼠移動到畫面左上角（綠色箭頭處），「pageY」的座標就變成「4246」了（因為這個網頁的“高度很高” height: 5000px;）

client

🎃 client：”滑鼠“在「當下的“瀏覽器視窗”」的位置

📖 「client」就是「窗口」的意思

🍋 「client」的計算範圍，就是以「當下“瀏覽器視窗”的寬、高」去做計算

🍋 「client」不會去管「網頁有多高」

🍋 就算我把網頁滾輪滾到最下方（紅色箭頭處），把滑鼠移動到畫面左下角（綠色箭頭處），「clientY」的座標最多就只會是「471」（當下的瀏覽器視窗，高度就是 471）