Capturando Cordenadas Mouse

uamistad · #1 (**permalink**) 02/05/2006, 06:08

Saludos !

Me encontré este pequeño código para capturar las cordenadas. Funciona muy bien y aquí se puede ver su implementación.

Código HTML:

<html><head><title>Coordenadas del mouse</title></head>
<body>

<script language="JavaScript1.2">
//(c) 1999-2001 Zone Web
	var IE = document.all?true:false;
	if (!IE) document.captureEvents(Event.MOUSEMOVE)
	document.onmousemove = getMouseXY;
	var tempX = 0;
	var tempY = 0;

	function getMouseXY(e) {
		if (IE) { //para IE
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
		}
	else { //para netscape
		tempX = e.pageX;
		tempY = e.pageY;
		}
	if (tempX < 0){tempX = 0;}
	if (tempY < 0){tempY = 0;}
	document.Show.MouseX.value = tempX;
	document.Show.MouseY.value = tempY;
	return true;
}
</script>

<!-- MUESTRA RESULTADOS DE LA CAPTURA -->
<form name="Show">
	X <input type="text" name="MouseX" value="0" size="4"><br>
	Y <input type="text" name="MouseY" value="0" size="4"><br>
</form>

</body></html>

Pero funciona SIEMPRE, yo lo necesito únicamente como respuesta a un evento onClick de un campo INPUT.

¿Alguna idea de cómo se podría modificar esa función?

En esa función se usa 'document.captureEvents(Event.MOUSEMOVE)' fuera de la función. ¿Yo debería usarlo dentro? Mil gracias.

uamistad · #2 (**permalink**) 02/05/2006, 06:45

Parece que estas otras funciones hacen lo mismo, na' más que mi ignorancia no me permite utilizarlas, jeje.

Lo que deseo es que la hacer click en un DIV, me salga un alert con las cordenadas relativas a ese DIV.

¿Cómo se pueden usar?

Código HTML:

function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
   return evt.clientX + (document.documentElement.scrollLeft ?
   document.documentElement.scrollLeft :
   document.body.scrollLeft);
else return null;
}

function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   return evt.clientY + (document.documentElement.scrollTop ?
   document.documentElement.scrollTop :
   document.body.scrollTop);
else return null;
}

hgb · #3 (**permalink**) 02/05/2006, 13:05

Pues no se, una pequeña modificación del primer ejemplo que pusiste ;)..

Código:

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;

function getMouseXY(e) {
	if (IE) { //para IE
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
	}
	else { //para netscape
		tempX = e.pageX;
		tempY = e.pageY;
	}
}

function oX(){
	return tempX;
}

function oY(){
	return tempY;
}

Y para utilizar, cuando necesites x o y, utiliza llama

Código:

x = oX();
y = oY();

Por cierto, puedes cambiar los nombres de tempX y tempY ya que són globales y pueden ser "ocultados" por variables locales a la función con los mismos nombres :P...

Por ejemplo globalTempX_2345234532 globalTempY_2345234532 de esa forma será más difícil que sobre escribas un nombre tan "raro" por equivocación.

uamistad · #4 (**permalink**) 02/05/2006, 13:38

GRACIAS !!!!!!!!!!!

Funcionó bien, de luxe !!!

Me pasé todo el día de ayer haciendo pruebas y nada.

No había lidiado antes con esa parte de Javascript, eso de venir de programación estructurada y luego enfrentarse con objetos (al nivel que sea) no sabes qué trabajo me ha costado.

Yahoooooooooooooooooooooooooooo !!

Ahora sí, a implementarlo. MIL THANKS.

xyyy7 · #5 (**permalink**) 24/10/2006, 22:59

Interesante