¿Cómo hacer clic en el elemento (para todo el documento)?

150

Me gustaría obtener el elemento actual (cualquier elemento que sea) en un documento HTML en el que hice clic. Estoy usando:

$(document).click(function () {
    alert($(this).text());
});

Pero muy extrañamente, obtengo el texto de todo el documento (!), No el elemento cliqueado.

¿Cómo obtener solo el elemento en el que hice clic?

Ejemplo

<body>
    <div class="myclass">test</div>
    <p>asdfasfasf</p>
</body>

Si hago clic en el texto "prueba", me gustaría poder leer el atributo con $(this).attr("myclass") en jQuery.

javascript jquery html dom usuario1145216
fuente
2
La función de controlador se ejecuta en el ámbito del elemento al que se agrega, aquí el documento. Deberá obtener la targetpropiedad del objeto de evento.
Bergi

Respuestas:

238

Debe utilizar el event.targetcual es el elemento que desencadenó originalmente el evento. El thiscódigo en su ejemplo hace referencia document.

En jQuery, eso es ...

$(document).click(function(event) {
    var text = $(event.target).text();
});

Sin jQuery ...

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || target.innerText;   
}, false);

Además, asegúrese de que necesita admitir <IE9 que utiliza en attachEvent()lugar de addEventListener().

alex
fuente
1
Descubrí que el elemento que era return era algo diferente de alguna manera, por lo que no podía hacer lo if(event.target === myjQueryDivElement)que tenía que hacer: if(event.target.hasClass('mydivclass'))donde mydivclass era una clase que tenía mi elemento.
redfox05
He estado buscando una solución en Safari durante 3 días y finalmente me topé con esta publicación. Chicos, gracias
Raymond Feliciano
3
@alex oye, ¿debería ser || target.innerText?
Jevgeni Smirnov
30

event.target para obtener el element

window.onclick = e => {
    console.log(e.target);  // to get the element
    console.log(e.target.tagName);  // to get the element tag name alone
}

para obtener el texto del elemento cliqueado

window.onclick = e => {
    console.log(e.target.innerText);
}
bhv
fuente
26

use lo siguiente dentro de la etiqueta del cuerpo

<body onclick="theFunction(event)">

luego use en javascript la siguiente función para obtener la ID

<script>
function theFunction(e)
{ alert(e.target.id);}

Malek Tubaisaht
fuente
3

Uso delegatey event.target. delegateaprovecha el burbujeo de eventos al permitir que un elemento escuche y maneje eventos en elementos secundarios. targetes la propiedad jQ-normalizada del eventobjeto que representa el objeto del que se originó el evento.

$(document).delegate('*', 'click', function (event) {
    // event.target is the element
    // $(event.target).text() gets its text
});

Demostración: http://jsfiddle.net/xXTbP/

JAAulde
fuente
2
Debe mencionarse en este día y edad que on()debería recomendarse más delegate(). Además, documentes probablemente la única excepción para no usar delegate()/ on()ya que están burbujeando al punto más alto de manejo de todos modos.
alex
Buena llamada. No nos hemos actualizado a la jQuery más reciente en mi trabajo diario, así que onme olvido.
JAAulde
1
@alex, dado que los eventos están burbujeando de todos modos, y dado que el controlador debe ejecutarse independientemente, no es realmente una excepción, ¿verdad? Simplemente no es tan diferente, es todo. Sin delegateembargo, supongo que tiene que considerar la sobrecarga de filtrado ...
JAAulde
2

Sé que esta publicación es muy antigua pero, para obtener el contenido de un elemento en referencia a su ID, esto es lo que haría:

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}
Aft3rL1f3
fuente
1 
$(document).click(function (e) {
    alert($(e.target).text());
});

fuente
-2

Aquí hay una solución que utiliza un selector jQuery para que pueda orientar fácilmente las etiquetas de cualquier clase, ID, tipo, etc.

jQuery('div').on('click', function(){
    var node = jQuery(this).get(0);
    var range = document.createRange();
    range.selectNodeContents( node );
    window.getSelection().removeAllRanges();
    window.getSelection().addRange( range );
});
Henry Lockett
fuente