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

คุณสมบัติ event.pageY ประกอบด้วย พิกัดของตัวชี้เมาส์ตามแกน Y สำหรับการกำหนดพิกัดยังมีคุณสมบัติ event.clientX, event.clientY, event.pageX มาดูความแตกต่างระหว่าง 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.pageY;

ตัวอย่าง

ขณะเคลื่อนเมาส์บนหน้าเว็บ เราจะแสดง พิกัดของเมาส์สัมพันธ์กับหน้าต่างเบราว์เซอร์ (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
คุณสมบัติ pageX,
ซึ่งกำหนดพิกัดของเมาส์ตามแกน X