คุณสมบัติ 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 จึงประกอบด้วยพิกัด ของเหตุการณ์โดยคำนึงถึงการเลื่อน

ไวยากรณ์

javascriptevent.clientX;

ตัวอย่าง

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

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

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

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

Результат:

ดูเพิ่มเติม