თვისება 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;
});
:
