- sziku69: Szólánc.
- sziku69: Fűzzük össze a szavakat :)
- Luck Dragon: Asszociációs játék. :)
- Geri Bátyó: Agglegénykonyha 6 – Néhány egyszerű tésztaétel
- sellerbuyer: Milyen laptopot vegyek? Segítek: semmilyet!
- gban: Ingyen kellene, de tegnapra
- eBay-es kütyük kis pénzért
- aquark: A ló túloldalán (Intel-AMD szivatás)
- Geri Bátyó: Agglegénykonyha 5 – Edények és konyhai eszközök
- sellerbuyer: Milyen mobiltelefont vegyek 2025 ben?
-
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
Hirdetés
- RETRO beárazás (mobil, PC, konzol)
- A Temu diktál Magyarországon, a hazai e-kereskedők fulladoznak
- sziku69: Szólánc.
- sziku69: Fűzzük össze a szavakat :)
- Luck Dragon: Asszociációs játék. :)
- Vicces képek
- Apple Watch
- Építő/felújító topik
- Autóápolás, karbantartás, fényezés
- NVIDIA GeForce RTX 5080 / 5090 (GB203 / 202)
- További aktív témák...
- Eladó LG OLED42C31LA 120Hz (garanciális, hibátlan állapotban)
- Katonai Rugged laptopok Panasonic Toughbook és Getac S410 6-11.gen gar.
- Lenovo ThinkPad P1 G2 Tervező Vágó Laptop -70% 15,6" Xeon E-2276M 32/1TB QUADRO T2000 4GB FHD
- Dell OptiPlex 3050 számítógép (I3/8gb/240SSD)
- Lenovo Thinkpad T495s Ryzen 5 PRO 3500U/16GB RAM/256 SSD/14" FHD touch Magyar bill. laptop eladó
- HIBÁTLAN iPhone 14 128GB Red -1 ÉV GARANCIA - Kártyafüggetlen, MS3159
- BESZÁMÍTÁS! MSI B450M R5 5600 16GB DDR4 512GB SSD RX 6700XT 12GB Zalman N4 FSP 700W
- Asus TUF Gaming F15 FX507 - 15,6"FHD 144Hz - i5-12500H - 8GB - 512GB SSD - RTX 3050 - 1 év garancia
- Gamer PC-Számítógép! Csere-Beszámítás! R5 5600X / RX 7600 / 32GB DDR4 / 1TB M.2 SSD
- iKing.Hu-Samsung Galaxy S24 FE Blue Stílusos erő, 120 Hz AMOLED 8/128 GB Használt, karcmentes
Állásajánlatok
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest
Cég: CAMERA-PRO Hungary Kft.
Város: Budapest