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