Elementy dynamiczne, elementy statyczne, programy obsługi zdarzeń i ich złożoność

Praca z elementami skumulowanymi na stronie, z których niektóre są zakotwiczeniami, a inne są elementami z obsługą zdarzeń, może czasami powodować dziwne zachowanie.

Ostatecznie wszystko ma związek z propagacją wydarzeń, ale jeśli nie miałeś do czynienia z tym (lub bulgotanie wydarzeń lub coś w tym stylu), może to być trochę wyzwaniem.

A oto przykład: A jeśli masz obraz, który jest owinięty w kotwicę. Co się stanie, gdy dynamiczny element zostanie umieszczony za pomocą JavaScript po załadowaniu strony, która wczytuje inny element dynamiczny? Co więcej, chcesz, aby strona nie przekierowywała się po kliknięciu elementu dynamicznego, ale nadal nie przekierowywała po kliknięciu obrazu?

To może wydawać się proste – aw niektórych przypadkach tak jest – ale jeśli masz przezroczysty element nakładający się na cały, oryginalny obraz, może to stać się zupełnie innym wyzwaniem.

W tym miejscu w grę wchodzi zrozumienie celów wydarzeń. Ale zanim przejdę do rozwiązania tego problemu, spróbuję sprowadzić wszystko do prostszego wyjaśnienia i przedstawić diagram, jak jest renderowany w DOM.

Elementy dynamiczne, elementy statyczne i programy obsługi zdarzeń

Spróbuj więc to sobie wyobrazić: Masz…

• Strona, która ma obraz i obraz jest zawinięty w kotwicę, która przeniesie Cię, powiedzmy, na inną stronę.
• Po załadowaniu strony tworzone są dwa elementy dynamiczne. Po kliknięciu pierwszego elementu powinien wyświetlić się drugi element dynamiczny.
• Kliknięcie pierwszej dynamiki nie powinno przekierowywać strony.
• Po kliknięciu oryginalnego obrazu powinien zachowywać się zgodnie z oczekiwaniami.

Najtrudniejszą częścią tego jest to, że dynamiczne elementy są umieszczane na istniejącej kombinacji kotwicy i obrazu.

Spojrzenie na DOM

Oznacza to, że DOM wyglądałby mniej więcej tak:

Uwaga na obrazku powyżej kotwicy wyzwala obraz, a element dynamiczny wyzwala nakładkę dynamiczną.

Jak więc mamy wyświetlić drugi element dynamiczny po kliknięciu pierwszego bez opuszczania strony? Możesz to zrobić, badając cel zdarzenia, które zostało wyzwolone.

Kodeks postępowania ze zdarzeniami

Będę używał jQuery poniżej, ponieważ większość moich czytelników pracuje z WordPressem, a WordPress jest dostarczany z jQuery, ale można to również obsłużyć za pomocą waniliowego JavaScriptu (ale próba podążania tą drogą jest czymś więcej niż chcę wyjaśnić w tym konkretnym przypadku Poczta).

Powiedziawszy to, oto sedno, które wyjaśnię, co się dzieje z kodem:

$('.acme-element').each(function(e) { 
  var $anchor = $(this).parents('a');
  $(this).on('click', function(evt) {
    if(e.target !== this) {
      evt.preventDefault();
    }
    // Here, you may want to action to redirect to an original anchor.
  });
});

Po pierwsze, zakładam, że istnieje wiele elementów dynamicznych, stąd powód każdego iteratora.

Następnie tworzy odniesienie do elementu zakotwiczenia, który jest rodzicem bieżącej instancji elementu dynamicznego (użycie tutaj var jest ważne, ponieważ zawsze odnosi się do elementu, który jest rodzicem bieżącej instancji iteracji w przeciwieństwie do nadpisywania poprzedniej instancji ).

Kiedy element zostanie kliknięty, konfigurujemy procedurę obsługi kliknięcia, abyśmy mogli spojrzeć na cel zdarzenia zdarzenia click. W tym miejscu robi się trochę zagmatwane.

Mamy zmienne e i evt, z których każda odnosi się do obsługi zdarzeń dla określonego elementu. W powyższym kodzie:

• e odnosi się do zdarzenia związanego z naszym żywiołem dynamicznym,
• evt odnosi się do elementu, ale wpływa również na proces bąblowania zdarzeń, co oznacza, że ​​będzie wyzwalać zdarzenia w pozostałej części DOM.

I tak, w naszym warunku, oceniamy cel pierwszego programu obsługi zdarzenia, aby upewnić się, że nie pasuje on do określonego elementu. Stamtąd, jak widać w komentarzu do kodu, możesz określić, w jaki sposób chcesz postępować (np. Może iść do przodu i pozwolić mu nawigować gdzie indziej lub zrobić coś innego).

Ostatecznie to twoja sprawa. Ale kiedy dostaniesz się do powiązania elementów dynamicznych, elementów statycznych i obsługi zdarzeń, może to szybko się skomplikować.