jQuery - klikanie na dowolny element na stronie i pobieranie jego ID

pytanie zadane 29 stycznia 2020 w JavaScript przez XiverKi Bywalec (2,050 p.)
edycja 29 stycznia 2020 przez XiverKi

$(document).ready(function(){
    $( '*' ).click( function( e ) {
        e.preventDefault();
        console.log($(this).attr('id'));
    });
});

Dzień dobry, korzystam z powyższego skryptu aby pobierać ID elementu, na który klikne i powstrzymywać jego domyślną akcje.

Problem w tym, że po kliknięciu nie pobiera mi ID jednego, klikniętego elementu ale całego drzewa na nim.
Z html, z body i dopiero element, który jest klikany.

Czy mogą jakoś pobrać ID jedynie klikanego elementu?

Natomiast poniższy skrypt pokazuje dane tylko jednego elementu ale w powielonej wersji np w konsoli dostaje kilka razy informacje z e.target

$(document).ready( function() {
    $( '*' ).on("click", function( e ) {
        e.preventDefault();
        console.log(e.target);
    });
});

Wygląda to tak jakby click wykonywał się kilkukrotnie.

1 odpowiedź

odpowiedź 31 stycznia 2020 przez ScriptyChris Mędrzec (190,190 p.)

W obu przypadkach podpinasz się pod każdy element na stronie. Zdarzenie click propagowane jest od klikniętego elementu do góry strony (tzw. bąbelkowanie).

Poniższy kod:

console.log($(this).attr('id'));

pokazuje ID każdego elementu na ścieżce bąbelkowania zdarzenia (bo każdy ma podpięte nasłuchiwanie na event).

Z kolei ten kod:

console.log(e.target);

wypisuje kliknięty element tyle razy, ile parent elementów jest po drodze do root elementu (<html>).

Żeby wypisać ID klikniętego elementu raz, wykorzystaj bąbelkowanie zdarzenia podpinając się np. do <body>:

 $(document).ready(function(){
    $( 'body' ).click( function( e ) {
        e.preventDefault();
        console.log(e.target.id);
    });
});

komentarz 1 lutego 2020 przez XiverKi Bywalec (2,050 p.)

Udało mi się tego tego dojść, zapomniałem zaktualizować post

zrobiłem $('body).on('click', '*', function())

wiec troche inaczej ale też śmiga dobrze.

Teraz jeszcze myśle, jak przekształcić obiekt DOM, który otrzymuje po kliknięciu na cały item i przekształcić go na json albo inną wartość tekstową.

Może konkretniej przedstawie mój problem:

Otóż, próbuje pobrać konkretną "Scieżkę" do klikniętego elementu. Niestety nie wszystkie elementy na stronie posiadają ID więc chciałem to obejść właśnie poprzez konkretną ścieżke.
Np: body > div > .container > .row > .col-lg-12 > .element > span

Czy jest taka możliwość?