¿Qué elemento fue pulsado?

02/Ago/2007 JavaScript 3 Comentarios

Una página web se compone de un árbol de elementos, llamado DOM. La representación visual de estos elementos, ya sean solos o combinados, forma la página web que vemos en nuestro navegador.

El lenguaje JavaScript combinado con el modelo de elementos, DOM, nos permite acceder a las propiedades de cada uno de los elementos que forman nuestra página HTML, leer sus valores, modificarlos,...

Esta codificación se puede hacer directamente indicando el ID del elemento en cuestión. Si bien, también existe la posibilidad de manipular un elemento que haya seleccionado el usuario con el ratón.

Para ello vamos a ver como podemos conocer que elemento, de los que forma nuestra página HTML, ha sido seleccionado por el usuario.

Lo primero que tenemos que controlar es que el usuario pinche con el ratón en algún lado de la página. Esto lo haremos mediante el evento onmousedown, el cual aplicaremos al elemento BODY de la página. Este evento lanzará una función, la cual reciba como parámetro el objeto event. Dicho objeto es el que guarda toda la información sobre el evento que se ha producido. La función solo tendrá que destripar la información de dicho objeto para ver que elemento fue pulsado.

La línea de código para capturar el evento del ratón es la siguiente:

  1. <body onmousedown="elemento(event);">

Vemos que la función que se lanza es "elemento". Con respecto a la propiedad que contiene la información del elemento pulsado, tenemos discrepancias entre los navegadores (no nos extraña a estas alturas). Algunos utilizan la propiedad scrElement y otros la propiedad target. Es por ello que tendremos que hacer una bifurcación en nuestro código.

Lo que si es igual para todos los navegadores, es la propiedad, incluida sobre la anterior, que contiene el nombre de la etiqueta. Esta propiedad es tagName.

Nuestro código quedará de la siguiente forma:

  1. function elemento(e){
  2. if (e.srcElement)
  3. tag = e.srcElement.tagName;
  4. else if (e.target)
  5. tag = e.target.tagName;
  6.  
  7. alert("El elemento selecionado ha sido " + tag);
  8. }

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “¿Qué elemento fue pulsado?”

Víctor Cuervo

unai

hola , muy buena funcion! Me ha solucionado la vida.
Para poder ponerle un estilo a esa tag es necesario saber en que posición está.
Como podriamos saberlo

Víctor Cuervo

diana

hola, una pregunta una vez que se obtiene el elemento clickeado, como puedo hacerle una funcion de jquery?, es decir if (event.target.nodeName.toLowerCase() === ‘img’) {var idImagen = event.target.id; $(‘#’+idImagen).keyup(function(e){ alert(‘evento’);}); } algo similar a eso solo que no me funciona la funcion keyup.

Víctor Cuervo

xavi

Gracias, me ha sido de mucha ayuda!

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*