Eienskap event.clientX
Die eienskap event.clientX bevat die
koördinate van die muiswyser op die X-as.
Om die koördinate te bepaal is daar ook die eienskappe
event.clientY,
event.pageX,
event.pageY.
Kom ons kyk na die verskil tussen clientX/clientY
en pageX/pageY.
Hoe clientX en clientY werk:
as jy 'n venster van 1000 by 1000
pixels het, en die muis is in die middel, dan sal clientX
en clientY albei gelyk wees aan 500. As
jy dan die bladsy horisontaal of vertikaal
rol, sonder om die wyser te beweeg, sal die waardes
van clientX en clientY nie verander nie, omdat dit gemeet word
relatief tot die venster, nie die dokument nie.
Hoe pageX en pageY werk:
as jy 'n venster van 1000 by 1000
pixels het, en die wyser is in die middel, dan
sal pageX en pageY gelyk wees aan 500. As
jy dan die bladsy met 250
pixels afrol, sal pageY gelyk word aan 750.
Dus bevat pageX en pageY die koördinate van die
gebeurtenis met rolposisie in ag geneem.
Sintaksis
event.clientX;
Voorbeeld
Tydens die beweging van die muis oor die bladsy sal ons sy
koördinate relatief tot die blaaiervenster
(clientX en clientY) uitskryf:
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
