Introducción

Podemos necesitar la posición (x, y) donde se ejecuta un evento de ratón si luego hemos de ubicar en ese punto la apertura de un mensaje emergente, un menú contextual o cualquier otro componente. Por ejemplo, cuando hacemos click en un elemento podemos obtener la posición con respecto a la esquina superior izquierda de ese mismo elemento. O bien con respecto a la página, que resulta útil para el cometido antes señalado. El objeto event nos ofrece varias posiciones como pageX, pageY, offsetX y offsetY. Pero también hay otros valores y no todos son soportados por los distintos navegadores.

Además event también nos devuelve el elemento donde se originó el evento. Para algunas versiones de Interner Explorer se obtiene con evt.srcElement y para los navegadores más actualizados con evt.target. En definitiva, conviene tener una función que recoga y gestione el evento para obtener valores que funcionen en la mayor cantidad posible de navegadores. Ya tenía la función recogeEvento() en el módulo general.js. Pero no funcionaba bien para algunos posicionamientos con Opera o Explorer. Así que he puesto manos a la obra para modificar esa función y tratar de ajustarla para que funcione igual en los navegadores principales. Pero no dudo que tenga que arreglar algo inesperado que ahora se me escapa. Después de todo, esto de los eventos en JavaScript es una de las cosas más enrevesadas con las que hemos de enfrentarnos, principalmente por el diferente tratamiento de los navegadores.

Practicar con posicionamientos

El siguiente ejemplo sirve para poner en práctica todo lo relacionado con los distintos estilos de posición static, relative, absolute o fixed y los valores de las coordenadas donde se originó un evento. Usaremos el evento onclick sobre elementos <div>. Hay uno con id="externo" y color amarillo que alberga al hijo con id="interno" de color azul. Inicialmente el externo tiene posicionamiento relativo (position: relative) y para el interno es absoluto (position: absolute). Éste tiene una imagen de fondo en forma de dos diagonales que se cruzan en el centro del elemento cuya finalidad es marcar un punto para hacer click y probar los resultados en distintos navegadores.

Estos elementos de prueba no tienen bordes, rellenos o márgenes (border, padding, margin), pero si tienen contorno (outline). El contorno siempre es exterior al borde, digamos que no forma parte de las dimensiones del elemento y así no afectarán a la prueba. Vea que para el elemento amarillo su contorno azul se ubica encima del borde verde del contenedor que agrupa todo el ejemplo. El elemento está en la posición izquierda y superior de ese contenedor verde, inmediatamente después del borde verde. Y su contorno azul se ubica por fuera del elemento y por tanto encima del borde verde. Cuando hacemos click en uno de los dos elementos cambiamos su contorno con línea de puntos roja de 2 píxeles para evidenciar que está seleccionado.

Las posiciones anteriores para el elemento seleccionado obtenidas desde el evento y de la ventana tienen distinto soporte en los navegadores consultados Chrome 25 (CH), Safari 5.1.7 (SA), Firefox 19 (FF), Opera 12 (OP), Internet Explorer 8 (IE8) y 9 (IE9):

De estos valores no nos sirve de mucho screenX/Y que nos da la posición relativa al monitor. Los valores de offsetX/Y nos dan la posición donde ocurre el evento relativa a la esquina superior izquierda del elemento. En el caso de Firefox hemos de utilizar layerX/Y para ese cometido. De aquí se obtiene el nuevo posicionamiento (x, y) en la función recogeEvento(). El relativo a la página lo podemos obtener de pageX/Y. Pero veámos primero que entendemos por relativo a la página.

Podemos entender el área cliente de la ventana del navegador como el área del navegador destinada a presentar los contenidos de una web. Su ancho y alto cambian si modificamos el tamaño de la ventana del navegador, que además del área cliente incluye las barras de botones y otros elementos propios del navegador. Por otro lado la página puede ser mayor que el área cliente en cuyo caso se activan las barras de desplazamiento o scroll. Si la página es igual o menor que la ventana, los valores pageX/Y y clientX/Y coincidirán al hacer click en un elemento. También sucederá lo mismo si la página es mayor y los scrolles están a cero y el elemento está en la parte superior izquierda de la página, en la superficie que coincide con el área cliente. En otro caso clientX/Y nos dará la posición del evento respecto al área cliente y pageX/Y respecto a la página pues tiene en cuenta el valor de los scrolles.

El scroll de la ventana lo obtenemos con window.scrollX/Y. Es una propiedad de window, no del evento que se está ejecutando sobre un elemento. Pero sumándolo a clientX/Y podemos obtener pageX/Y. Sería una forma de obtener pageX/Y para IE8 que no lo soporta. Pero es que tampoco soporta window.scrollX/Y. Para intentar resolver todo esto tengo la función recogeEvento() del módulo general.js, que tras la última modificación queda así:

El relativo al elemento lo obtenemos de event.offsetX/Y a excepción de Firefox con el que usamos event.layerX/Y. Para el relativo a la página usamos pageX/Y en los navegadores que lo soporten. Para IE8 diferenciamos entre elementos que no sean de bloque y con posición estática, así como para los fijos, tomándolo desde event.x/y. Para otros elementos sumamos event.offsetX/Y y element.offsetLeft/Top. Si hay un offsetParent también le sumamos su separación.

Pruebas

Las pruebas a realizar consistirán en aplicar estilo de posiciones absolute, estatic y fixed al contenedor azul (con id="interno").

El padre con color amarillo (con id="externo") se mantiene con posición relative en la primera prueba y con relative o static para las otras dos. Esto es porque el posicionamiento relativo se comporta igual que el estático en lo que afecta al propio elemento, pero a efectos de sus hijos sirve de referencia para posicionarlos absolutamente. Hay más combinaciones hijo-padre que podemos hacer con relative, absolute, static y fixed, pero no parece que tales combinaciones puedan ser útiles a la hora de maquetar los contenidos. Un par de ellas son estas:

Posicionamiento absoluto

Usaremos el ejemplo de pruebas anterior tal como aparece al cargarse la página para tomar algunos valores en varios navegadores. El elemento <div id="interno"> (color azul) está inicialmente posicionado absolutamente pues su estilo es position: absolute. Ese posicionamiento es relativo a su padre <div id="externo"> (color amarillo) dado que tiene el estilo position: relative. Si este padre y todos sus ascendientes tuviesen un posicionamiento estático, entonces el posicionamiento del contenedor azul se hace en relación a la página. El elemento azul está posicionado en left="50px" top="50px" en relación con el padre amarillo. Haciendo click exactamente donde se cruzan las diagonales obtenemos los valores (pagx, pagy) y (x, y) a partir de la función recogeEvento() del módulo general.js.

Los valores(pagx,pagy) nos dan la posición del punto donde se activó el evento relativo a la página. Esta medida no es afectada por los scrolles, por lo tanto sea cual sea la posición de los mismos siempre obtendremos la posición correcta respecto a la página. La distancia horizontal es de 85 píxeles en todos los navegadores consultados. Es la suma de 8 píxeles de margen (margin) del <body>, más 2 píxel del borde verde del contenedor que agrupa el ejemplo, más 50 píxeles de la posición left del elemento y más 25 píxeles que es el punto central del elemento: 8+2+50+25 = 85. Los márgenes del elemento <body> son generalmente de 8 píxeles en los navegadores. En Developers Tools de Chrome podemos verlo:

Los otros 8 píxeles de relleno del contenedor <id="contenido"> son el resultado de su estilo padding: 0.5em declarado en el archivo interior.css. Dado que la fuente usada es de 1em que equivale a 16px entonces resultan esos 8 píxeles. En resumen, la separación horizontal respecto a la página es igual en todos los navegadores. Pero la vertical no tiene porque serlo. De hecho si prueba el ejemplo verá que puede obtener valores diferentes. La distancia que separa el contenedor azul desde el inicio de la página depende de múltiples factores. Habrán contenidos previos con posición estática y sin dimensiones cuyo altura se ajustará según el ancho de la ventana, como pueden ser elementos <p> cuya altura se ajusta para mostrar todo el texto. Otro factor es el uso de medidas relativas en em's. Cómo son en relación a la fuente, pueden existir pequeñas diferencias entre navegadores para el tamaño efectivo final de la fuente que esté usando el navegador. Además los navegadores puede aplicar estilos iniciales a los elementos HTML que pueden diferir entre ellos.

Por lo tanto los valores de posición relativos a la página no deben usarse como valores absolutos. Pero eso no nos preocupa cuando lo que nos interesa es captar en que punto exacto se produjo un evento y, por ejemplo, abrir en ese (x,y) relativo a la página una aplicación como podría ser un contenedor emergente (pop-up) o un menú contextual. Estos componentes estarían envueltos en un contenedor posicionado también absolutamente con respecto a la página y los ubicaríamos en el punto (pagx, pagy) donde se produjo el evento aplicándolo en sus propiedades left y top.

La distancia (x, y) respecto al elemento si tiene que ser la misma en todos los navegadores, pues el punto central donde cruzan las dos diagonales está exactamente en (25, 25) respecto de la esquina superior izquierda del elemento. Está en el centro de ese contenedor azul que es de 50×50 píxeles. Es el mismo obligatoriamente para todos los navegadores porque tiene dimensiones específicamente declaradas con el estilo width: 50px y height: 50px.

Posicionamiento estático

Dándole posicionamiento estático al elemento de color azul (id="interno"), ahora es indiferente si el padre id="externo" tiene posicionamiento relativo o estático, pues su hijo no resulta posicionado. Es decir, no se aplican las propiedades left y top (aparecerán los valores vacíos). Estos son los valores que ahora obtenemos cuando hacemos click en el centro de las diagonales:

También en este caso no le afecta la posición de los scrolles. La separación horizontal de 35 píxeles en relación con la página es la suma de 8 píxeles de margen del <body>, más 2 píxeles del borde verde del contenedor que agrupa el ejemplo y más 25 píxeles hasta el punto central de las diagonales: 8+2+25 = 35. Como antes, la separación vertical relativa a la página dependerá del flujo de los contenidos previos. Y la posición respecto al elemento sigue siendo (25, 25), el punto central de las diagonales.

Posicionamiento fijo

Por último podemos darle un posicionamiento fijo al contenedor azul. También ahora es indiferente el posicionamiendo relativo o estático del padre de color amarillo, aunque no para IE8 que debe ser estático, como explicaremos más abajo. El azul se ubicará en la posición (50, 50) píxeles respecto a la página.

Para este posicionamiento si hay que tener en cuenta los scrolles. Esta prueba se ha realizado con los dos a cero. Con esa situación el punto de cruce de las diagonales está en (75, 75) relativo a la página, que es la suma de su separación (50, 50) desde la esquina superior izquierda de la página más los 25 píxeles hasta el punto donde cruzan esas diagonales. Ese punto (25, 25) es de nuevo el relativo al elemento como en los casos anteriores. Vea que ahora la posición es fijada con lo que no le afecta el flujo de contenidos ni siquiera el scroll. El contenedor se mantiene fijado en esa posición. Pero los valores pagx/y, que se obtienen en recogeEvento() a partir de event.pageX/Y, si que tienen en cuenta los scrolles. Puesto que al hacer click en el elemento nos da la posición sobre la página, no sobre el área cliente de la ventana del navegador. Este valor lo podríamos obtener directamente con event.clientX/Y que es soportado por todos los navegadores.

Si el interno tiene posicionamiento fijo se entiende que es fijo respecto a la página. Por eso el navegador debería ignorar el posicionamiento del padre y posicionar el hijo fijándolo en las posiciones declaradas en su left, top. Los valores obtenidos con scrolles a cero serán también (75, 75) en IE8, pero el padre de color amarillo debe tener posición estática. De no ser así se obtienen unos valores que no se corresponden con ese posicionamiento fijo.