คุณสมบัติ event.pageX

คุณสมบัติ event.pageX ประกอบด้วย พิกัดของเคอร์เซอร์เมาส์ตามแกน X สำหรับการกำหนดพิกัดยังมีคุณสมบัติ event.clientX, event.clientY, event.pageY มาดูความแตกต่างระหว่าง clientX/clientY และ pageX/pageY

clientX และ clientY ทำงานอย่างไร: หากคุณมีหน้าต่างขนาด 1000 คูณ 1000 พิกเซล และเมาส์อยู่ตรงกลาง ดังนั้น clientX และ clientY จะมีค่าเท่ากับ 500 ทั้งคู่ หาก คุณเลื่อนหน้าเว็บในแนวนอน หรือแนวตั้ง โดยไม่ขยับเคอร์เซอร์ ค่า clientX และ clientY จะไม่เปลี่ยนแปลง เนื่องจากนับ สัมพันธ์กับหน้าต่างเบราว์เซอร์ ไม่ใช่เอกสาร

pageX และ pageY ทำงานอย่างไร: หากคุณมีหน้าต่างขนาด 1000 คูณ 1000 พิกเซล และเคอร์เซอร์อยู่ตรงกลาง ดังนั้น pageX และ pageY จะมีค่าเท่ากับ 500 หาก คุณเลื่อนหน้าเว็บลงมา 250 พิกเซล ดังนั้น pageY จะมีค่าเท่ากับ 750 ดังนั้น pageX และ pageY จึงประกอบด้วยพิกัด ของเหตุการณ์โดยคำนึงถึงการเลื่อนหน้าจอ

ไวยากรณ์

event.pageX;

ตัวอย่าง

ขณะเลื่อนเมาส์บนหน้าเว็บ เราจะแสดง พิกัดของมันสัมพันธ์กับหน้าต่างเบราว์เซอร์ (pageX และ pageY):

<div id="elem">0 : 0</div>

let elem = document.getElementById('elem');

document.addEventListener('mousemove', function(event) {
	elem.innerHTML = event.pageX + ' : ' + event.pageY;
});

ดูเพิ่มเติม

คุณสมบัติ clientY,
ซึ่งกำหนดพิกัดของเมาส์ตามแกน Y
คุณสมบัติ clientX,
ซึ่งกำหนดพิกัดของเมาส์ตามแกน X
คุณสมบัติ pageY,
ซึ่งกำหนดพิกัดของเมาส์ตามแกน Y