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 бoyынша 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;
});
:
