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

Результат:

იხილეთ ასევე