Vlastnost event.pageX

Vlastnost event.pageX obsahuje souřadnice kurzoru myši na ose X. Pro určení souřadnic existují také vlastnosti event.clientX, event.clientY, event.pageY. Podívejme se na rozdíl mezi clientX/clientY a pageX/pageY.

Jak fungují clientX a clientY: pokud máte okno 1000 na 1000 pixelů a myš je uprostřed, pak clientX a clientY budou oba rovny 500. Pokud pak posunete stránku vodorovně nebo svisle, aniž byste pohnuli kurzorem, hodnoty clientX a clientY se nezmění, protože se počítají vzhledem k oknu, nikoli k dokumentu.

Jak fungují pageX a pageY: pokud máte okno 1000 na 1000 pixelů a kurzor je uprostřed, pak pageX a pageY budou rovny 500. Pokud pak posunete stránku o 250 pixelů dolů, pak pageY bude rovno 750. pageX a pageY tedy obsahují souřadnice události s ohledem na posuvník.

Syntaxe

javascriptevent.pageX;

Příklad

Při pohybu myši po stránce budeme zobrazovat její souřadnice vzhledem k oknu prohlížeče (pageX a pageY):

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

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

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

Результат:

Viz také