คุณสมบัติ event.clientY
คุณสมบัติ event.clientY ประกอบด้วย
พิกัดของเคอร์เซอร์เมาส์ตามแกน Y
สำหรับกำหนดพิกัดยังมีคุณสมบัติ
event.clientX,
event.pageX,
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.clientY;
ตัวอย่าง
เมื่อเลื่อนเมาส์บนหน้าเว็บ เราจะแสดง
พิกัดของมันสัมพันธ์กับหน้าต่างเบราว์เซอร์
(clientX และ clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
