¿Cómo mostrar el nombre de la etiqueta del elemento en el que se hizo clic usando jQuery?

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:

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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