Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

6. Eventos (III)

6.3 Eventos del ratón

Información del evento

A veces necesitamos obtener información adicional sobre algunos aspectos del evento. Los casos más normales son obtener la posición del ratón en los eventos de ratón, o la tecla con la que se actúa en los eventos de teclado. Para ello javascript tiene un objeto especial llamado event.

Sin embargo los diferentes navegadores tienen distintas formas de obtener este objeto.

Internet explorer considera que forma parte del objeto window, con lo cual se obtiene mediante el código window.event

El resto de navegadores lo consideran como un argumento implícito que se pasa a la función al ser llamada por un evento, con lo que no tenemos más que darle un nombre al argumento para obtener este objeto:

function manejaEventos(elEvento) { ...

En este caso al llamar a la función desde un evento, el objeto que nos da la información se llamaría elEvento

Para obtener un código compatible con ambos tipos de navegadores, deberemos escribir el código de la siguiente manera:

function manejaEventos(elEvento) {
var evento = elEvento || window.event;

Donde evento es el objeto que nos dará la información sobre el evento, tanto en Internet Explorer como en el resto de navegadores. Podemos cambiar el nombre del argumento, en lugar de llamarlo elEvento podemos llamarlo de cualquier otra manera, al igual que el nombre del objeto - aquí lo llamamos evento -, pero lo que no podemos variar es el window.event, ya que esta es la forma de obtener el objeto en Internet Explorer.

Información sobre el tipo de evento

Una vez que accedemos al objeto event el siguiente paso es obtener la información a partir de este objeto. Si ponemos varios eventos asociados a un mismo elemento, mediante el objeto event podemos distinguirlos para asociarles diferentes códigos.

La propiedad type permite distinguir el tipo de evento producido, lo cual permite distinguir entre los distintos enventos que puede manejar una función.

function manejaEventos(elEvento) {
var evento = elEvento || window.event;
var tipo = evento.type

Aquí la variable tipo será el nombre del evento sin el prefijo on, es decir si el evento que hemos pasado a la función es onmouseover el valor de tipo será "mouseover"

Vamos a verlo en el siguiente código el cual cambia a colores distintos a un párrafo, según hagamos sobre él un click o un doble click. El código HTML del párrafo es el siguiente:

<p id="colores">pulsa un click para cambiar a color purpura, 
   doble click color oliva</p>

Y el código javascript del ejemplo es el siguiente:

function color(elEvento){
         evento = elEvento || window.event;
         tipo = evento.type;
         if (tipo == "click") {
            this.style.color = "purple";
            }
         else if (tipo == "dblclick") {
            this.style.color = "olive";
            }
         }
window.onload = function() {
document.getElementById("colores").onclick = color;
document.getElementById("colores").ondblclick = color;
}

El Resultado del script puedes verlo en el siguiente párrafo:

pulsa un click para cambiar a color purpura, doble click color oliva

Coordenadas del ratón

La información más utilizada sobre los eventos del ratón es la posición de las coordenadas del puntero en la página.

Una vez que hemos obtenido el objeto event (al cual aquí lo llamaremos por la variable evento), podemos acceder a las coordenadas del puntero del ratón en la pantalla. Según desde dónde tomemos el origen de coordenadas, tenemos tres tipos de información sobre las coordenadas:

Respecto a la pantalla completa

El origen de coordenadas se encuentra en la esquina superior izquierda de la pantalla, aunque la página no ocupe toda la pantalla:

• Coordenada X: Código: var coordenadaX = evento.screenX; (Distancia horizontal al borde izquierdo).
• Coordenada Y: Código: var coordenadaY = evento.screenY; (Distancia vertical desde la parte superior).

Respecto de la ventana del navegador

Origen de coordenadas en la esquina superior izquierda de la parte visible de la página. Si hacemos scroll, ya no estará en el origen de la página, sino en el punto más alto y a la izquierda visible de la página.

• Coordenada X: Código: var coordenadaX = evento.clientX; (Distancia horizontal al borde izquierdo).
• Coordenada Y: Código: var coordenadaY = evento.clientY; (Distancia vertical desde la parte superior).

Respecto al origen de la página

El origen de coordenadas se encuentra en la esquina superior izquierda la página web; no del navegador, ni de la parte visible de la página, sino de la página como tal.

• Coordenada X: Código: var coordenadaX = evento.pageX; (Distancia horizontal al borde izquierdo).
• Coordenada Y: Código: var coordenadaY = evento.pageY; (Distancia vertical desde la parte superior).

Esta última opción no es compatible con el navegador Internet Explorer. Para obtener las coordenadas respecto del origen de la página en Internet Explorer debemos obtener las coordenadas respecto de la ventana del navegador y sumarle el desplazamiento que tiene la página respecto de su origen. Esto se obtiene mediante las propiedades document.documentElement.scrolLeft y document.documentElement.scrolTop.

Las coordenadas respecto del origen de la página para Internet Explorer se obtendran de la manera siguiente:

coordenadaX = evento.clientX + document.documentElement.scrollLeft;
coordenadaY = evento.clientY + document.documentElement.scrollTop;

Esta forma de obtener la coordenada respecto a la página es admitida también por el resto de navegadores, por lo que es la que usaremos normalmente.

Botones del ratón

Podemos obtener la información sobre cual es el botón del ratón que se ha pulsado mediante la propiedad button del objeto event

botonPulsado = evento.button

A cada botón del ratón le corresponde un número, que será el valor devuelto por esta propiedad. El problema está en que los diferentes navegadores asignan diferentes números para los botones del ratón.

En Internet Explorer los valores para los botones del ratón son 1 = botón izquierdo 2 = botón derecho, 3 = botón izquierdo y derecho a la vez y 4 = botón central, mientras que en el resto de navegadores los valores son 0 = botón derecho, 1 = botón central y 2 = botón derecho.

Esta propiedad sólo funciona con los eventos onmousedowun y onmouseup, por lo que otros eventos del ratón ignoran la propiedad, y no dan un resultado.

El siguiente script permite ver el valor del botón del ratón que se ha pulsado:

function pulsar(ev) {
         evento = ev || window.event;
         pulsado = evento.button;
         texto = document.getElementById("info");
         texto.innerHTML = "Valor del último botón del ratón pulsado: " + pulsado
         }
window.onload = function() {
document.documentElement.onmousedown = pulsar
}

Y en el código html debemos poner un elemento cuyo atributo id tenga por valor "info":

<p id="info"></p>

El siguiente párrafo muestra el resultado del script, al pulsar los diferentes botones del ratón da diferentes valores para cada uno.

Valor del último botón del ratón pulsado : ratón aún no pulsado

Ejemplo de página con información sobre el ratón

En la siguiente página de ejemplo se muestra la información sobre las coordenadas del ratón, y también un elemento que podemos cambiarlo de sitio, al cambiarle sus coordenadas de referencia en CSS. Este es su código, el cual está comentado para ver a qué corresponde cada bloque de sentencias:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>Información del ratón</title> 
<style type="text/css">
body  { width: 1500px; }
h3  { position: fixed; }
#caja { position: absolute; width: 100px; height: 100px; border: 1px solid black; 
        background-color: yellow; top: 70px } 
#textos { position: fixed; width: 300px; height: 200px; border: 1px solid black; z-index: -1;
        right: 50px; top:100px;  }
</style>
<script type="text/javascript">
var estado = "parar" // Estado inicial del cuadrado: sin mover
function info(elEvento) {
         var evento = elEvento || window.event; //obtener objeto event
         var despX = document.documentElement.scrollLeft; //desplazamiento de la pagiina al hacer scroll
         var despY = document.documentElement.scrollTop;
         var ventanaX = evento.clientX; //coordenadas de la ventana
         var ventanaY = evento.clientY;
         var paginaX =  ventanaX + despX; //coordenadas de la página
         var paginaY =  ventanaY + despY;
         var pantallaX = evento.screenX //coordenadas de la pantalla
         var pantallaY = evento.screenY
         caja1 = document.getElementById("caja") //posición del cuadrado
         posx = paginaX - 50
         posy = paginaY - 50
         if (estado == "mover"){ //desplazamiento del cuadrado
             caja1.style.left = posx + "px"
             caja1.style.top = posy + "px"	
             }
         texto = document.getElementById("posicion") //escribir coordenadas de la página
         texto.innerHTML = "Coordenadas de la página: " + paginaX + "px, " + paginaY + "px."
         texto2 = document.getElementById("ventana") //escribir coordenadas de la ventana
         texto2.innerHTML = "Coordenadas de la ventana:  " + ventanaX + "px, " + ventanaY + "px."
         texto3 = document.getElementById("pantalla") //escribir coordenadas de la pantalla
         texto3.innerHTML = "Coordenadas de la pantalla: " + pantallaX + "px, " + pantallaY + "px." 
         texto4 = document.getElementById("accion") //e3scribir estado del cuadrado
         texto4.innerHTML = "Movimiento del cuadrado: " + estado
         texto5 = document.getElementById("desplaza") //scroll de la página
         texto5.innerHTML = "Desplazamiento de la página: " + despX + ", " + despY
         }	
function mover(ev){ //control del movimiento del cuadrado
         var evento2 = ev || window.event //distinguir acción del ratón
         tipo = evento2.type
         if (tipo == "click") { //coger el cuadrado (un  click)
            estado = "mover"
            }
         else if (tipo == "dblclick") { //soltar el cuadrado (doble click)
            estado = "parar"
            }
         }
window.onload = function() { //provocar los eventos				
document.body.onmousemove = info	
document.getElementById("caja").onclick = mover;
document.getElementById("caja").ondblclick = mover;
}
</script>
</head>
<body>
<h3>Arrastra este cuadrado: Haz un click encima de él para cogerlo y doble click para soltarlo.</h3>
  <div id="caja"></div>
  <br/><br/><br/><br/><br/>
<div id="textos">
   <p id="posicion">Coordenadas de la página: </p>
   <p id="ventana">Coordenadas  de la ventana: </p>
   <p id="pantalla">Coordenadas  de la pantalla:</p>
   <p id="accion"> Estado: </p>
   <p id="desplaza" ></p>
</div>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <p>Parrafo para alargar la página.</p>
  <br/><br/><br/><br/><br/>
  <p>Parrafo para alargar la página.</p>
  <br/><br/><br/><br/><br/>
  <p>Parrafo para alargar la página.</p>
</body>
</html>

Puedes ver como queda esta página en el siguiente enlace:

Información sobre el ratón.

Observa cómo en la primera función obtenemos las coordenadas de la página, y las aplicamos para que se vean en el recuadro, y para poder mover el cuadrado. En la segunda función distinguimos el tipo de evento que se produce, obligándole a activar o desactivar el poder mover el cuadrado.

En la siguiente página veremos cómo obtener información sobre los eventos del teclado.

Eventos del teclado.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com