Új hozzászólás Aktív témák

• Jim-Y veterán

  #4249

  #4248 kemkriszt98

  2014-08-09 20:40:45

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Jim-Y

  veterán

  #4248 kemkriszt98

  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 .outer

  Emiatt 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