Динамические элементы, статические элементы, обработчики событий и их сложности

Работа со сложенными элементами на странице, некоторые из которых являются якорями, а другие являются элементами с обработчиками событий, иногда может привести к странному поведению.

В конечном счете, все это связано с распространением событий, но если вам не приходилось иметь дело с этим (или всплытием событий или чем-то подобным), это может стать проблемой.

И вот пример: Что делать, если у вас есть изображение, завернутое в якорь. Что происходит, когда вы размещаете динамический элемент с помощью 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.

Таким образом, в нашем условном выражении мы оцениваем цель первого обработчика событий, чтобы убедиться, что она не соответствует конкретному элементу. Оттуда, как вы можете видеть в комментарии к коду, вы можете определить, как вы хотите действовать (например, пойти дальше и позволить ему перейти в другое место или сделать что-то еще).

В конце концов, это ваш выбор. Но когда вы сталкиваетесь с динамическими элементами, статическими элементами и обработчиками событий, это может быстро усложниться.