Dado un documento HTML que contiene algunos elementos y la tarea es mostrar el elemento en el que se hizo clic.
Enfoque: primero creamos un documento HTML que contiene algunos elementos y agregamos una función jQuery para mostrar el elemento en el que se hizo clic. Seleccionamos el cuerpo HTML usando el selector jQuery y cuando el usuario hace clic en el elemento, obtenemos el nombre del elemento y lo mostramos en la pantalla usando el método text().
Sintaxis:
$("*", document.body).click(function (event) { event.stopPropagation(); var domElement = $(this).get(0); $("h3:first").text("Clicked Element: " + domElement.nodeName); });
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <script src= "//code.jquery.com/jquery-1.11.1.min.js"> </script> <meta charset="utf-8"> <title> How to display the tag name of the clicked element using jQuery? </title> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> How to display the tag name of the clicked element using jQuery? </h2> <table style="width:50%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Priya</td> <td>Sharma</td> <td>24</td> </tr> <tr> <td>Arun</td> <td>Singh</td> <td>32</td> </tr> <tr> <td>Sam</td> <td>Watson</td> <td>41</td> </tr> </table> <h3></h3> </center> <script> $("*", document.body).click(function (event) { event.stopPropagation(); var domElement = $(this).get(0); $("h3:first").text("Clicked Element: " + domElement.nodeName); }); </script> </body> </html>
Producción: