• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Uzycie "this" w click listener jQuery

VPS Starter Arubacloud
0 głosów
460 wizyt
pytanie zadane 19 października 2022 w JavaScript przez jasper93 Obywatel (1,310 p.)

Przychodzę z problemem, ostatnio przypadkowo użyłem "this".on("click",function(){}) tak jak poniżej i za każdym razem przeglądarka wypluwa błędy, natomiast jeśli zamiast "this" użyje jakiegokolwiek znacznika np "nav a" wszystko działa dobrze. Mam przez to rozumieć, że należy konkretnie wskazać co będzie nasłuchiwane podczas klikania?

<script>

      $("this").on("click", function () {

        const goTosection = "#" + $(this).attr("class");

        console.log(goTosection);

        $("body, html").animate(

          {

            scrollTop: $(goTosection).offset().top,

          },

          2000

        );

      });

    </script>

 

3 odpowiedzi

+1 głos
odpowiedź 19 października 2022 przez ScriptyChris Mędrzec (190,190 p.)

Jakie błędy pokazuje przeglądarka?

Próbujesz znaleźć element o tagu "this", a raczej nie masz takiego znacznika w HTML. jQuery akurat nie powinno rzucić błędem, tylko zwrócić pustą kolekcję. Co chcesz osiągnąć przez podpięcie się pod (raczej u Ciebie nieistniejący) tag "this"? Nawet jakbyś użył this zamiast "this", czyli de facto próbował podpiąć się pod obiekt window, to i tak IMO nie ma sensu,

komentarz 19 października 2022 przez jasper93 Obywatel (1,310 p.)

Przepraszam, chodziło o this, a nie "this". Z tego co mi wiadomo to przez this właśnie odnosimy się do obiektu w moim przypadku, w który kliknęliśmy, oto błąd:

index.html:34 Uncaught TypeError: Cannot read properties of undefined (reading 'top')
    at index.html:34:47
    at dispatch (jquery.js:5430:27)
    at elemData.handle (jquery.js:5234:28

 

komentarz 19 października 2022 przez ScriptyChris Mędrzec (190,190 p.)

Mhm, czyli jednak masz w HTML znacznik o nazwie "this", skoro event handler się wykonuje? Dość dziwne.

Sprawdź czym jest goTosection - wykonsoluj to. Czy ten element nie jest ukryty? Z tego, co czytam w dokumentacji wynika, że .offset() zwraca undefined dla elementów mających display: none.

While it is possible to get the coordinates of elements with visibility:hidden set, display:none is excluded from the rendering tree and thus has a position that is undefined.

komentarz 19 października 2022 przez jasper93 Obywatel (1,310 p.)
Hmm, goTosection po prostu pobiera klasę, która ma taką samą nazwę jak id w innym znaczniku. Wrzucę kod będzie łatwiej:

https://jsfiddle.net/vgh3mwaL/
komentarz 19 października 2022 przez ScriptyChris Mędrzec (190,190 p.)

this w globalnym scope (bez włączonego strict mode) wskazuje na obiekt window. Ten nie ma atrybutu class, więc (po konkatenacji) zmienna goTosection ma wartość "#undefined". Takiego elementu nie ma w DOM, więc .offset() zwraca undefined.

Ponownie pytam - co chcesz osiągnąć przez podpięcie się pod this w taki sposób?

komentarz 19 października 2022 przez jasper93 Obywatel (1,310 p.)
Po prostu chciałem sprawdzić, czy jak uzyję this, to program rozpozna, że klikam  w np: "O mnie" lub "Portfolio", etc.. I Przeniesie mnie do tego punktu, tak jak użyłbym "nav a"
komentarz 19 października 2022 przez ScriptyChris Mędrzec (190,190 p.)

To mi wygląda na próbę wykorzystania event delegation. W takim wypadku sprawdzaj, czym jest event.target i jeśli to jest jakiś element w DOM (a nie window), to dopiero odczytuj .offset().

komentarz 19 października 2022 przez jasper93 Obywatel (1,310 p.)
Dziękuje, poczytam nie miałem jeszcze z tym styczności. Dopytam z ciekawości gdzieś widziałem, że użycie window, document można używać zamiennie, nie ma aż tak dużych różnic?
1
komentarz 19 października 2022 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli chodzi o eventy, to zarówno window jak i document mają swoje dedykowane eventy. Natomiast AFAIK większość eventów w DOM jest propagowanych (w górę - bombelkowanie - i w dół - przechwytywanie). W takim przypadku zarówno window jak i document powinny taki propagowany event otrzymać. Są natomiast sytuacje (często zależne od przeglądarki), gdzie dany event jest widoczny dla document, ale nie dla window (lub odwrotnie). Domyślnie, przy takim root-owym event delegation, przypinałbym się pod document, albo document.body - jeśli to nie zadziała, to wtedy próbował window.

Natomiast jeśli pytasz czy window i document można ogólnie używać zamiennie, to nie. window reprezentuje cały globalny obiekt dostępny dla JavaScriptu w przeglądarce (w tym document), a document odnosi się tylko do DOM.

+1 głos
odpowiedź 19 października 2022 przez Nudzi mi się Gaduła (4,460 p.)

event jest przypisany do złego elementu. Dodałeś handler do kliknięcia na window zamiast na element nawigacji.

$('nav a').on("click", function () {

 

komentarz 19 października 2022 przez jasper93 Obywatel (1,310 p.)
Czyli w tym przypadku this ma tylko zastosowanie jeśli klikałbym w window?
komentarz 19 października 2022 przez Nudzi mi się Gaduła (4,460 p.)
Tak, wykona się zawsze jeżeli klikniesz gdziekolwiek w oknie strony
+1 głos
odpowiedź 19 października 2022 przez VBService Ekspert (251,270 p.)
edycja 19 października 2022 przez VBService

Chyba chodziło Tobie o <body> (lub document.body)

przykład [ on-line ]

$(document.body).on("click", function(e) {
  if ($(e.target).is('[class]')) {
    const goTosection = "#" + $(e.target).attr("class");

    $("body, html").animate({
      scrollTop: $(goTosection).offset().top,
    }, 2000);
  }
});

 

komentarz 19 października 2022 przez jasper93 Obywatel (1,310 p.)
Tak, dokładnie jeszcze raz dziękuje. Jeszcze chciałem dopytać o jedną rzecz bo nie daje mi to spokoju, w linku poniżej w innym projekcie, w warunku if mam $(this) i odnosi się on do zmiany klasy w div podczas klikania też na diva, czyli da się używać this jeśli nie wykonuję operacji na window tak jak to było wspomniane wcześniej?

https://jsfiddle.net/dqjuxwot/
komentarz 19 października 2022 przez VBService Ekspert (251,270 p.)
edycja 20 października 2022 przez VBService

We wskazanym przez Ciebie kodzie, w tym kontekście możesz użyć this.

Przeczytaj: Trochę więcej o this

 

P.S. 

$(".interface").on("click", function () {
  console.log(this.nodeName);
  console.log(this.className);

  //... reszta kodu

}

$(".interface").on("click", function (e) {
  console.log(this.nodeName, e.target.nodeName);
  console.log(this.className, e.target.className);

  //... reszta kodu

}

w tym samym kodzie zamień ".interface" na "document.body"

$(document.body).on("click", function (e) {
  console.log(this.nodeName, e.target.nodeName);
  console.log("body: " + this.className, 
               e.target.nodeName + ": " + e.target.className);

  //... reszta kodu

}

 

Podobne pytania

0 głosów
2 odpowiedzi 203 wizyt
0 głosów
3 odpowiedzi 435 wizyt
pytanie zadane 31 lipca 2018 w JavaScript przez Wyshak Początkujący (260 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...