Você pode criar um evento click para todos os elementos do body
e tratar o clique no elemento clicado, buscando os seus ancestrais. No final irá retornar uma string no formato que pediu (demais explicações no código):
$("body *").click(function(e){
e.stopPropagation(); // evita o bubbling
var ateh = "#corpo"; // seletor que define até onde irá procurar o ancestral
// pode ser um id, class, tag ou outro seletor válido
var prev = $(e.target) // pega o elemento clicado
.parentsUntil(ateh) // pega os ancestrais até o primeiro filho definido na variável ateh
.addBack(); // adiciona o elemento clicado (jQuery v1.8 ou maior)
// .andSelf(); // adiciona o elemento clicado (jQuery v1.7 ou menor)
var tags = prev.get() // pega os elementos do nodelist
.map(function(a){ // e converte em uma array com os objetos HTML
return a.tagName // retorna os nomes das tags do objetos HTML
})
.join(" > ") // converte em string separando-os por " > "
.toLowerCase(); // converte tudo em minúsculas
var pais = ateh // monta a string final incluindo o ancestral definido
+ " > " // na variável ateh que não foi incluído no .parentsUntil()
+ tags;
console.clear(); // limpa o console
console.log(pais); // imprime no console
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="corpo">
<div>
div
<nav>
nav
<h3>
H3
<b>
b
</b>
</h3>
</nav>
<label>
label
</label>
</div>
</body>
Uma observação a respeito do bubbling:
Como um elemento está dentro de outro (é um descendente direto ou não), se você clicar nele estará clicando nos seus pais também. Ou seja, o evento será disparado no elemento clicado e em todos os seus ancestrais, mas o que queremos é que o evento escute apenas o elemento clicado. O .stopPropagation()
serve justamente para isso, evitar que o evento seja disparado também pelos ancestrais do elemento clicado. Tem um bom tópico aqui que trata do assunto.