თვისება event.pageX
თვისება event.pageX შეიცავს
მაუსის კურსორის კოორდინატებს X ღერძზე.
კოორდინატების დასადგენად ასევე არსებობს თვისებები
event.clientX,
event.clientY,
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.pageX;
მაგალითი
მაუსის გვერდზე გადაადგილებისას ჩვენ გამოვსახავთ
მის კოორდინატებს ბრაუზერის ფანჯარასთან მიმართებაში
(pageX და pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
