[JavaScript]Typ najgłębiej zagnieżdzonego elementu Opcje

[Dapi]

Witam!
Potrzebuję pobrać za pomocą JS/jQuery pobrać typ najgłębiej zagnieżdzonego dziecka na który nastąpiło kliknięcie.

Przykładowy kod do którego odnosi się problem:

[HTML] pobierz, plaintext 
<a href="#"><u><i><b>1234</b>56789</i></u></a>
[HTML] pobierz, plaintext 

Po kliknięciu w "1234" chciałbym dostać "B", natomiast po klinięciu w "56789", chciałbym dostać "I".

Kod

$('div.main').on('click', '*', function(e){ /*reszta*/ this.nodeName /*reszta*/})

niestety nie zawsze zwraca mi najgłębiej zagnieżdzony element, tzn w tym przykładzie dla "1234" zwraca "I", a dla "56789" zwraca "U".

Kombinować z odwołaniami do dzieci chyba nie mogę, bo nigdy nie wiem, które dziecko z kolei zostało kliknięte.

Najlepiej by było, gdyby dało się to osiągnąć bez dodatkowych bibliotek.

Jakieś pomysły, jak to osiągnąć?

Ten post edytował Dapi 26.02.2014, 16:09:34

[owca_82]

Kod

document.getElementsByTagName('a')[0].onclick = function(event){

    alert(event.target.nodeName);

};

online -> http://jsfiddle.net/8bKzw/1/

[Dapi]

Obawiam się, że ustawianie akcji dla każdego elementu z osobna nie przejdzie...
Potrzebuję po kliknięciu w link podświetlić jednego diva, po kliknięciu w pogrubienie podświetlić innego, po kliknięciu na czysty tekst usunąć podświetlenie, a jeśli link będzie pogrubiony, podświetlić oba (tu mogę pobrać rodziców, mając najgłębsze dziecko).
Do tego idealnie pasowałoby jQuerowe on('click', '*', function()), ale ono niezbyt celnie określa typ elementu

[owca_82]

Nie ustawiam akcji dla każedego elementu z osobna tylko korzystam z tzw. event delegation

Może tak -> http://jsfiddle.net/yUW2X/6/

Ten post edytował owca_82 26.02.2014, 21:13:36

[Dapi]

Trochę na około, ale mniej więcej sobie poradziłem.

Kod

$('body').on('click', 'div.main', function(e){
    $('.toolbar > div').removeClass('hover');
});
$('div.main').on('click', 'a', function(e){
    setTimeout(function(){
        $('.toolbar > div.anchor').addClass('hover');
    },50);
});
$('div.main').on('click', 'b', function(e){
    setTimeout(function(){
        $('.toolbar > div.bold').addClass('hover');
    },50);
});

Opóźnienie musi być, ze względu na kolejność wykonywania funkcji. Sądzę, że można je jeszcze zmniejszyć, choć już i tak jest niezauważalne praktycznie.

Dzięki za naprowadzenie