Hirdetés
- Luck Dragon: Asszociációs játék. :)
- sziku69: Szólánc.
- sziku69: Fűzzük össze a szavakat :)
- Brogyi: CTEK akkumulátor töltő és másolatai
- MaxxDamage: Vizes Laptop Hűtés? Lehetséges? Igen!
- D1Rect: Nagy "hülyétkapokazapróktól" topik
- Magga: PLEX: multimédia az egész lakásban
- sh4d0w: Netflix? Ugyan, VW előfizetés!
- Eztis_Aztis: Hogyan tovább....
- moongoose: Mennyire tűnik kamunak ez a weboldal? http://kymera.hu/
-
LOGOUT
JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)
Új hozzászólás Aktív témák
-
Jim-Y
veterán
válasz
kemkriszt98 #4248 üzenetére
Szia. Én nem értek túlságosan a jQuery-hez, de még a tanulásod elején megemlíteném, hogy érdemes 1-2 good-practice-t betartani.
Az egyik ilyen, hogy kerüljük a this használatát. Amikor csak lehet használjunk mást. A példádban is lehetett volna mást használni, és ennek nem csak az az előnye, hogy olvashatóbb, és érthetőbb lesz a kód, vannak olyan helyzetek, amikor rossz működésre vezet a this használata.
Demo (rossz eset, amikor a példád hibázna, nem várt eredményre jutna):
http://jsfiddle.net/Jim_Y/tsucL8je/18/
Mi történt?
- két divet ágyaztunk egymásba. jQuery-vel egy eseménykezelőt állítunk a div-re, és azt várnánk, hogy amelyik kockára kattintunk, az majd 100px-el lejjebb kerül. Nem ez történik!
- ad1: propagation, a selector nem egy, hanem 2 elemet is "matchel", először azon fut le az eseménykezelő amire ténylegesen kattintottál, tehát a .inner, majd propagál és a .outer div-en is le fog futni az eseménykezelő.
- ad2: a this mindig az aktuálisan "propagált" elemre mutat. Tehát az első loop-ban a this a .inner, majd a következőben a this a .outerEmiatt mindkét div lejjebb fog kerülni, talán 100px-nél nem is olyan feltűnő, de egy kattintásra az a div amin eredetileg kattintottunk (.inner) összesen 200px-el csúszott lejjebb.
Megoldás vol1:
Cseréljük le a this-t, ahogy eredetileg is javasoltam event.target-re.
http://jsfiddle.net/Jim_Y/tsucL8je/19/
Mi történt?
- még mindig furcsán működik, még mindig nem azt tapasztaljuk amit szerettünk volna, most egy kattintásra a .inner kocka 2x100px-el lejjebb került.
Ez azért van, mert az event.target minden loopban ugyanaz, arra mutat amelyik elemre kattintottunk az egérrel. (megjegyzés: az event.currentTarget minden esetben === this)
Első ciklusban event.target -et eltoltuk 100px-el, majd jön a második ciklus (propagation ugyebár, vagy bubbling effect, ki hogy ismeri) ahol ugyancsak event-targetet toltuk el 100px-el.
Megoldás vol2:
http://jsfiddle.net/Jim_Y/tsucL8je/20/
Mi történt?
- itt már szinte az történik amire számítottunk, amire kattintunk az 100px-el lejjebb kerül és nincs propagation. Persze ha a .outer div-re kattintunk akkor az inner is lejjebb kerül, ez annak a következménye, hogy az inner az outeren belül van foglalva. Ezen nem tudunk segíteni, csak ha máshogy írjuk meg a html-t.
Összefoglalva:
* event.target statikus, mindig arra mutat amire ténylegesen kattintottunk (vagy általánosabban fogalmazva, amelyik node-on az esemény létrejött)
* this az változik, illetve sok esetben nem lehet megmondani, hogy most éppen mire is mutat a this, jobb ezt elkerülni.
* event propagation. Ezt is figyelembe kell venni bizonyos esetekben.Üdv
Új hozzászólás Aktív témák
- Huawei Nova Y70 128GB, Kártyafüggetlen, 1 Év Garanciával
- Acer TravelMate P214 i3-1115G4 12GB 256GB 14" FHD 1év garancia
- iKing.Hu - Samsung Galaxy S25 Edge Használt, újszerű állapotban 12 GB RAM / 512 GB tárhely
- Felturbóznád a gèped? Ezt Neked ajánljuk!
- Lenovo Thinkpad L14 Gen 4 -14"FHD IPS - i5-1335U - 8GB - 256GB - Win11 - 2 év garancia - MAGYAR
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft.
Város: Budapest
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest