Como obter o elemento clicado (para todo o documento)?

150

Gostaria de obter o elemento atual (qualquer que seja o elemento) em um documento HTML em que cliquei. Estou usando:

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

Mas, estranhamente, recebo o texto do documento inteiro (!), Não o elemento clicado.

Como obter apenas o elemento em que cliquei?

Exemplo

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

Se eu clicar no texto "test", gostaria de poder ler o atributo com $(this).attr("myclass") no jQuery.

javascript jquery html dom user1145216
fonte
2
A função do manipulador é executada no escopo do elemento ao qual é adicionado, aqui o documento. Você precisará obter a targetpropriedade do objeto de evento.
Bergi

Respostas:

238

Você precisa usar o event.target qual é o elemento que originalmente acionou o evento. O thiscódigo do seu exemplo se refere document.

No jQuery, isso é ...

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

Sem jQuery ...

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

Além disso, verifique se você precisa oferecer suporte ao <IE9 que você usa em attachEvent()vez de addEventListener().

alex
fonte
1
Descobri que o elemento que retornava era um pouco diferente, de modo que não podia if(event.target === myjQueryDivElement)fazer: if(event.target.hasClass('mydivclass'))onde mydivclass era uma classe que meu elemento tinha.
amigos estão dizendo sobre redfox
Estive procurando uma solução no Safari por 3 dias e finalmente encontrei este post. Você eles rock graças
Raymond Feliciano
3
@ alex hey, deveria ser || target.innerText?
Jevgeni Smirnov
30

event.target para obter o 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 obter o texto do elemento clicado

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

use o seguinte na etiqueta do corpo

<body onclick="theFunction(event)">

use em javascript a seguinte função para obter o ID

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

Malek Tubaisaht
fonte
7

Você pode encontrar o elemento de destino em event.target:

$(document).click(function(event) {
    console.log($(event.target).text());
});

Referências:

Peter-Paul van Gemerden
fonte
3

Use delegatee event.target. delegateaproveita o borbulhamento do evento, permitindo que um elemento escute e manipule eventos em elementos filho. targeté a propriedade jQ-normalized do eventobjeto que representa o objeto do qual o evento se originou.

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

Demonstração: http://jsfiddle.net/xXTbP/

JAAulde
fonte
2
Deve ser mencionado neste dia e idade que on()deve ser recomendado delegate(). Além disso, documenté provavelmente a única exceção a não usar delegate()/ on()pois eles estão borbulhando até o ponto mais alto de qualquer maneira.
alex
Boa decisão. Não atualizamos para o jQuery mais recente no meu dia de trabalho, então onme esquece.
precisa saber é
1
@ alex, já que os eventos estão borbulhando de qualquer maneira, e como o manipulador precisa ser executado independentemente, não é realmente uma exceção, é? Simplesmente não é tão diferente assim. Eu acho que delegatetem a filtragem de sobrecarga a considerar, embora ...
JAAulde
2

Eu sei que este post é realmente antigo, mas, para obter o conteúdo de um elemento em referência ao seu ID, é isso que eu faria:

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

fonte
-2

Aqui está uma solução que usa um seletor jQuery para que você possa direcionar facilmente tags de qualquer classe, 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
fonte