Per programar algunes accions en resposta al moviment del cursor a la finestra del navegador, de vegades és necessari determinar-ne les coordenades. Això es pot fer mitjançant un script que té la possibilitat de fer un seguiment dels esdeveniments que es produeixen al navegador. Un script JavaScript del costat del client té aquesta capacitat. A continuació es descriu una de les opcions per obtenir les coordenades del cursor utilitzant les funcions d’aquest llenguatge.
Instruccions
Pas 1
Utilitzeu les propietats de l'objecte d'esdeveniment per obtenir les coordenades actuals del cursor. Aquest objecte té tot un conjunt de propietats rellevants per determinar les coordenades del cursor del ratolí. La propietat LayerX conté la distància mesurada en píxels des de la vora esquerra de la capa actual i LayerY, la mateixa distància des de la vora superior. Aquestes dues propietats tenen sinònims: en lloc de event. LayerX, podeu escriure event.x i, en lloc de event. LayerY, podeu escriure event.y. Les propietats pageX i pageY contenen les coordenades horitzontals i verticals del cursor en relació amb la vora superior esquerra de la finestra del navegador i les propietats screenX i screenY contenen valors similars en relació amb la pantalla del monitor.
Pas 2
Afegiu la comprovació del tipus de navegador al vostre codi i utilitzeu les propietats clientX i clientY a més de les propietats anteriors de l'objecte d'esdeveniment. Això és necessari perquè Microsoft utilitza una designació de propietat diferent al seu navegador Internet Explorer. Podeu combinar tots dos enfocaments per determinar coordenades, per exemple, així:
if (evevnt.pageX || evevnt.pageY) {
coordenadaX = evevnt.pageX;
coordenadaY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Pas 3
Col·loqueu el codi de definició de coordenades en una funció personalitzada. Per exemple:
funció GetMouse (evevnt) {
var coordenadaX = 0, coordenadaY = 0;
if (! evevnt) evevnt = finestra.event;
if (evevnt.pageX || evevnt.pageY) {
coordenadaX = evevnt.pageX;
coordenadaY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
retorna {"coordX": coordinateX, "coordY": coordinateY};
}
Aquesta funció retorna una matriu de dos elements anomenats, el primer dels quals (amb la tecla coordX) conté la coordenada X i el segon (coordY) conté la coordenada Y.
Pas 4
Anomeneu aquesta funció en algun esdeveniment, per exemple, en el cas del moviment del ratolí (onmousemove) en el context del document. La mostra següent utilitza una funció per enviar les coordenades del ratolí a la barra d'estat:
document.onmousemove = funció (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
