9

Como saber se um descendente de um <li> foi clicado usando Javascript puro.

<div id="list">
    <a href="#">one</a>
    <a href="#">two</a>
    <a href="#">three</a>    
</div>

Usando Jquery seria:

$('#list a')

Como fazer usando Javascript puro?

0

5 Respostas 5

16

À semelhança do seu seletor com jQuery pode usar o querySelectorAll e ir buscar todos os elementos que são descendentes de <li> e usar um for loop para iterálos e amarrar um event handler a cada um.

Exemplo (live aqui):

var descendentes = document.querySelectorAll("#list a");
for (var i = 0; i < descendentes.length; i++) {
    descendentes[i].addEventListener("click", function (e) {
        alert('O elemento clicado foi o ' + this.innerHTML);
    })
}

Uma outra opção é adicionar um click handler (para detectar o evento clique) sobre o <li> directamente. Se depois quiser saber qual o elemento descendente de <li> que foi clicado pode usar event.target.

Exemplo (live aqui):

var li = document.getElementById("list");
li.addEventListener("click", function(event) {
    console.log(event.target); // este é o elemento clicado
    alert('O elemento clicado foi o ' + e.target.innerHTML);

    // dentro desta função o "this" refere-se ao <li>
})
2

Utilize o document.getElementsByTagName().

1
  • 3
    Robson, bemvindo ao Stackoverflow! Pode completar a sua resposta com exemplo de código para esta pergunta? Assim como está a resposta é pouco clara, para alem disso o link que juntou vai para uma página em Inglês o que não ajuda a quem não fale inglês.
    – Sergio
    2/04/2014 às 10:36
2

Se você pegar vários div com document.getElementByTagName(), depois você cria um for para adicionar a cada elemento um evento de clique com o addEventListener(). O elemento clicado vai ser referenciado ao objeto this, o qual você vai fazer a ação desejada.

Exemplo:

 window.onload = function() {
	var divs = document.getElementsByTagName("div");
	
	for(var i=0; i<divs.length; i++) {
		divs[i].addEventListener("click", function() {
			this.style.backgroundColor = "#ccc";
			});
		}
	}
div { width:100px; height:100px; background-color:#C00; margin:10px; display:inline-block;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
  
</head>
  
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

</html>

0

Uma outra coisa que resolve e acredito que seja mais simples seria:

$("#list a").click(function(event){
     event.preventDefault(); //Essa linha vc coloca caso queira anular o evento do click da tag <a>;
     console.log("O elemento clicado foi: " + $(this).text();
});

Espero ter ajudado. Boa sorte!

2
  • Na verdade a pergunta era sobre - como se fazer isso utilizando puro Javascript, mas isto não deixa de ser uma boa resposta, caso a intenção da pergunta fosse - como se fazer isso utilizando jQuery.
    – Chun
    2/10/2015 às 19:27
  • 1
    Tens razão, fui logo vendo e respondendo sem atentar para o restante da pergunta, obrigado. 2/10/2015 às 20:07
0

Uma maneira concisa de se obter o elemento clicado é primeiro armazenar e obter a referência do elemento e depois adicionar um evento de escuta no elemento, e como argumento da função, usar o objeto event que disponibiliza várias propriedades, entre elas a propriedade target

const element = document.querySelector('element)

element.addEventListener('click', event => {
    console.log(event.target)
})

OBS: o target contem várias outras propriedades que também podem ser encadeadas para vários propósitos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .