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