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.

— 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

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:

http://api.jquery.com/event.target/

— 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());
});

-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