Динамічні елементи, статичні елементи, обробники подій та їх складності

Робота зі складеними елементами на сторінці, одні з яких є прив’язками, а інші є елементами з обробниками подій, іноді може викликати дивну поведінку.

Зрештою, все це пов’язано з розповсюдженням подій, але якщо вам не доводилося з цим стикатися (або вибухання подій чи щось подібне), це може бути певним викликом.

І ось приклад: що робити, якщо у вас є зображення, загорнуте в якір. Що відбувається, коли динамічний елемент, розміщений за допомогою JavaScript після завантаження сторінки, завантажує інший динамічний елемент? Крім того, ви хочете зупинити переспрямування сторінки, коли клацаєте динамічний елемент, але все одно переспрямовувати, коли клацаєте зображення?

Це може здатися простим – і в деяких випадках це так, – але якщо у вас є прозорий елемент, який перекриває все оригінальне зображення, це може стати зовсім іншим завданням.

Ось тут і вступає в гру розуміння цілей події. Але перш ніж перейти до того, як це вирішити, я спробую скласти все до більш простого пояснення та зобразити схему, як це відображається в DOM.

Динамічні елементи, статичні елементи та обробники подій

Тож спробуйте уявити це: у вас є…

• Сторінка, яка має зображення, і зображення загорнуте в прив’язку, яка переведе вас, скажімо, на іншу сторінку.
• Під час завантаження сторінки створюються два динамічних елемента. Коли клацнути перший, має відобразитися другий динамічний елемент.
• Коли натиснуто перший динамічний елемент, він не повинен переспрямовувати сторінку.
• Коли клацнути оригінальне зображення, воно має діяти належним чином.

Важкою частиною цього є те, що динамічні елементи розміщуються поверх наявної комбінації прив’язки та зображення.

Погляд на DOM

Це означає, що DOM виглядатиме приблизно так:

Зауважте, що на зображенні вище прив’язка запускає зображення, а динамічний елемент запускає динамічне накладання.

Отже, як ми можемо відобразити другий динамічний елемент після натискання першого, не виходячи зі сторінки? Ви можете зробити це, вивчивши ціль події, яка була ініційована.

Код для обробки подій

Нижче я буду використовувати jQuery, оскільки більшість моїх читачів працюють із WordPress, а WordPress постачається з jQuery, але це також можна впоратися за допомогою ванільного JavaScript (але спроба піти цим шляхом — це більше, ніж я готовий пояснити в цій конкретній статті). пост).

З огляду на це, ось суть, яку я поясню, що відбувається з кодом:

$('.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.
  });
});

По-перше, я роблю припущення, що існує кілька динамічних елементів, отже, причина кожного ітератора.

Далі створюється посилання на елемент прив’язки, який є батьківським для поточного екземпляра динамічного елемента (використання var тут важливо, щоб він завжди посилався на елемент, який є батьківським для поточного екземпляра ітерації, а не перезаписує попередній екземпляр ).

Коли елемент натискається, ми встановлюємо обробник клацання, щоб ми могли поглянути на ціль події події клацання. Ось де це стає трохи заплутаним.

У нас є змінні e та evt, кожна з яких посилається на обробник події для певного елемента. У коді вище:

• e відноситься до події, пов’язаної з нашим динамічним елементом,
• evt відноситься до елемента, але також впливатиме на процес витікання подій, що означає, що він запускатиме події в усій решті DOM.

Таким чином, у нашій умові ми оцінюємо ціль першого обробника події, щоб переконатися, що вона не відповідає конкретному елементу. Звідти, як ви бачите в коментарі до коду, ви можете визначити, як ви хочете продовжити (наприклад, продовжити і дозволити йому переміщатися в іншому місці або робити щось інше).

Зрештою, це ваш вибір. Але коли ви потрапляєте в скруту динамічних елементів, статичних елементів і обробників подій, це може швидко ускладнитися.