Captura y revisa a que elemento haces click con javascript

Aunque JQuery es el nuevo estandar, compatible y que vale para todo siempre es bueno volver al viejo javascript para hacer las cosas.

Uno de los problemas principales es saber a que elemento DOM ha hecho el usuario click encima y, por ejemplo, ver el contenido de este para luego realizar lo que necesitemos. Es decir, he aqui un script que permite devolver sobre que elemento estamos haciendo click.

// Creamos un array vacio
var ElementosClick = new Array();
// Capturamos el click y lo pasamos a una funcion
document.onclick = captura_click;
	
function captura_click(e) {
	// Funcion para capturar el click del raton
	var HaHechoClick;
	if (e == null) {
		// Si hac click un elemento, lo leemos
		HaHechoClick = event.srcElement;
	} else {
		// Si ha hecho click sobre un destino, lo leemos
		HaHechoClick = e.target;
	}
	// Añadimos el elemento al array de elementos
	ElementosClick.push(HaHechoClick);
	// Una prueba con salida en consola
	console.log("Contenido sobre lo que ha hecho click: "+clickedElement.innerHTML);	
}

Como vemos, escribimos por consola de javascript el contenido de donde hemos pulsado.

tuti

Técnico en Comunicación Interna de la UVa

4 comentarios en “Captura y revisa a que elemento haces click con javascript”

  1. Hola!

    Creo que el final esta mal puesto, pones :
    console.log(«Contenido sobre lo que ha hecho click: «+clickedElement.innerHTML);
    Y a mi me funciona solo si pongo
    console.log(«Contenido sobre lo que ha hecho click: «+ ElementosClick.innerHTML);

    Pero siempre me dice que hago click sobre un elemento undefined, ya tenga ID, value, name……

    ¿Por que puede ser?

    Un Saludo!

  2. :::::::::::::::::::::::::: Puedes hacer esto ::::::::::::::::::::::::::

    // Creamos un array vacio
    var ElementosClick = new Array();
    // Capturamos el click y lo pasamos a una funcion
    document.onclick = captura_click;

    function captura_click(e) {
    // Funcion para capturar el click del raton
    var HaHechoClick;
    if (e == null) {
    // Si hac click un elemento, lo leemos
    HaHechoClick = event.srcElement.tagName;
    } else {
    // Si ha hecho click sobre un destino, lo leemos
    HaHechoClick = e.target.tagName;
    }
    // Añadimos el elemento al array de elementos
    ElementosClick.push(HaHechoClick);
    // Una prueba con salida en consola
    console.log(«Contenido sobre lo que ha hecho click: «+ HaHechoClick);
    }

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.