Az event.clientX tulajdonság

Az event.clientX tulajdonság az egérkurzor X tengely koordinátáit tartalmazza. A koordináták meghatározására további tulajdonságok is léteznek: event.clientY, event.pageX, event.pageY. Nézzük meg a különbséget a clientX/clientY és a pageX/pageY között.

Hogyan működik a clientX és a clientY: ha van egy 1000 x 1000 pixel méretű ablak, és az egér középen van, akkor a clientX és a clientY mindketten 500 lesznek. Ha ezután vízszintesen vagy függőlegesen görgetsz, anélkül, hogy mozgatnád a kurzort, akkor a clientX és clientY értékei nem változnak, mivel ezek az ablakhoz viszonyítva számítódnak ki, nem a dokumentumhoz.

Hogyan működik a pageX és a pageY: ha van egy 1000 x 1000 pixel méretű ablak, és a kurzor középen van, akkor a pageX és a pageY 500 lesz. Ha ezután lefelé görgetsz 250 pixelt, akkor a pageY 750 lesz. Így a pageX és a pageY a görgetéssel együtt véve tartalmazza az esemény koordinátáit.

Szintaxis

javascriptevent.clientX;

Példa

Amikor az egér mozog az oldalon, kiírjuk annak koordinátáit a böngészőablakhoz viszonyítva (clientX és clientY):

html<div id="elem">0 : 0</div>

javascriptlet elem = document.getElementById('elem');

document.addEventListener('mousemove', function(event) {
  elem.innerHTML = event.clientX + ' : ' + event.clientY;
});

Результат:

Lásd még