Estoy aprendiendo JQuery a través de w3school. Y me encontré con este ejemplo. Según tengo entendido, $("*").dblclick() vincula el evento de doble clic a cada elemento del documento (cada elemento tiene su propio evento y están separados).
Y espero que, después de hacer doble clic en un elemento <p> , solo desaparezca el elemento en el que se hizo clic. Sin embargo, cuando hago clic en un elemento <p> , todos los elementos <p> desaparecen. ¿Puedo saber cómo está mal mi entendimiento?
"*" selecciona TODOS los elementos, incluidos <body> y <html> ( https://api.jquery.com/all-selector/ ). Entonces, si hace doble clic en uno de sus párrafos, el evento se activará tres veces, uno para <p> , uno para <body> y otro para <html> generando este comportamiento "no deseado". Si uno de sus <p> estuviera dentro, digamos, un <div> , el evento se desencadenaría cuatro veces. Una forma de evitar esto es detener la propagación del evento.
$( function() { $( "*" ).dblclick( function( event ){ console.log( event.target.innerHTML ); console.log( event.target.parentElement.tagName ); $(this).hide(); event.stopPropagation(); }); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>aaaaaa</p> <p>bbbbbb</p> <p>cccccc</p> <div> <p>dddddd</p> </div>👋
Eso es porque el * en $("*").dblclick() es un selector como se explica en W3Schools .
A lo que * significa "todos los elementos", haciendo referencia a la estructura DOM de HTML, <body> también es un elemento, y JQuery también le agrega el evento, por lo que cuando dice "cuando hago clic en un elemento <p> " , lo que en realidad deberías querer decir es _"cuando hago clic en el elemento <body> ".
Esto se debe a que el elemento <body> está ubicado jerárquicamente por encima de los elementos p , y el evento se desencadena en ese elemento porque tiene prioridad sobre el elemento p que contiene el body .
Entonces, su código está funcionando absolutamente bien. Pero si desea, por ejemplo, que "después de hacer doble clic en un elemento <p> , solo desaparezca el elemento en el que se hizo clic" , tal vez su código debería verse así:
$("p").dblclick()
Lo que significa que encuentre todos los elementos p y vincule este evento y cumplirá con sus expectativas.
¡Espero que me digas qué sucedió cuando lo probaste! ¡Feliz codificación!