Praca z elementami skumulowanymi na stronie, z kt\u00f3rych niekt\u00f3re s\u0105 zakotwiczeniami, a inne s\u0105 elementami z obs\u0142ug\u0105 zdarze\u0144, mo\u017ce czasami powodowa\u0107 dziwne zachowanie.<\/p>\n
Ostatecznie wszystko ma zwi\u0105zek z propagacj\u0105 wydarze\u0144, ale je\u015bli nie mia\u0142e\u015b do czynienia z tym (lub bulgotanie wydarze\u0144 lub co\u015b w tym stylu), mo\u017ce to by\u0107 troch\u0119 wyzwaniem.<\/p>\n
A oto przyk\u0142ad: A je\u015bli masz obraz, kt\u00f3ry jest owini\u0119ty w kotwic\u0119. Co si\u0119 stanie, gdy dynamiczny element zostanie umieszczony za pomoc\u0105 JavaScript po za\u0142adowaniu strony, kt\u00f3ra wczytuje inny element dynamiczny? Co wi\u0119cej, chcesz, aby strona nie przekierowywa\u0142a si\u0119 po klikni\u0119ciu elementu dynamicznego, ale nadal nie przekierowywa\u0142a po klikni\u0119ciu obrazu?<\/p>\n
To mo\u017ce wydawa\u0107 si\u0119 proste \u2013 aw niekt\u00f3rych przypadkach tak jest \u2013 ale je\u015bli masz przezroczysty element nak\u0142adaj\u0105cy si\u0119 na ca\u0142y, oryginalny obraz, mo\u017ce to sta\u0107 si\u0119 zupe\u0142nie innym wyzwaniem.<\/p>\n
W tym miejscu w gr\u0119 wchodzi zrozumienie cel\u00f3w wydarze\u0144. Ale zanim przejd\u0119 do rozwi\u0105zania tego problemu, spr\u00f3buj\u0119 sprowadzi\u0107 wszystko do prostszego wyja\u015bnienia i przedstawi\u0107 diagram, jak jest renderowany w DOM.<\/p>\n
Spr\u00f3buj wi\u0119c to sobie wyobrazi\u0107: Masz\u2026<\/p>\n
Najtrudniejsz\u0105 cz\u0119\u015bci\u0105 tego jest to, \u017ce dynamiczne elementy s\u0105 umieszczane na istniej\u0105cej kombinacji kotwicy i obrazu.<\/p>\n
Oznacza to, \u017ce DOM wygl\u0105da\u0142by mniej wi\u0119cej tak:<\/p>\n
Uwaga na obrazku powy\u017cej kotwicy<\/strong> wyzwala obraz<\/strong>, a element dynamiczny<\/strong> wyzwala nak\u0142adk\u0119 dynamiczn\u0105<\/strong>.<\/p>\n Jak wi\u0119c mamy wy\u015bwietli\u0107 drugi element dynamiczny po klikni\u0119ciu pierwszego bez opuszczania strony? Mo\u017cesz to zrobi\u0107, badaj\u0105c cel zdarzenia, kt\u00f3re zosta\u0142o wyzwolone.<\/p>\n B\u0119d\u0119 u\u017cywa\u0142 jQuery poni\u017cej, poniewa\u017c wi\u0119kszo\u015b\u0107 moich czytelnik\u00f3w pracuje z WordPressem, a WordPress jest dostarczany z jQuery, ale mo\u017cna to r\u00f3wnie\u017c obs\u0142u\u017cy\u0107 za pomoc\u0105 waniliowego JavaScriptu (ale pr\u00f3ba pod\u0105\u017cania t\u0105 drog\u0105 jest czym\u015b wi\u0119cej ni\u017c chc\u0119 wyja\u015bni\u0107 w tym konkretnym przypadku Poczta).<\/p>\n Powiedziawszy to, oto sedno, kt\u00f3re wyja\u015bni\u0119, co si\u0119 dzieje z kodem:<\/a><\/strong><\/p>\n Po pierwsze, zak\u0142adam, \u017ce istnieje wiele element\u00f3w dynamicznych, st\u0105d pow\u00f3d ka\u017cdego<\/a> iteratora.<\/p>\nKodeks post\u0119powania ze zdarzeniami<\/h3>\n
$('.acme-element').each(function(e) { \n var $anchor = $(this).parents('a');\n $(this).on('click', function(evt) {\n if(e.target !== this) {\n evt.preventDefault();\n }\n \/\/ Here, you may want to action to redirect to an original anchor.\n });\n});<\/code><\/pre>\n