0

Подскажите, пожалуйста. Столкнулся с такой проблемой: начал переносить разработку сайта под webpack, сделал стандартный конфиг, всё хорошо работает, кроме одной детали, связанной с dev-server. Есть функционал при клике:

**if(target.classList.contains("burger")) {
        let burgerMenu = document.querySelector(".menu__wrapper");
        let burger = document.querySelector(".burger");
        burger.classList.toggle("active");
        burgerMenu.classList.toggle("active");   
    }**

Если пробовать протестировать это всё не на dev-server, то код отрабатывает хорошо. Но как только я запускаю dev-server, при том же клике будто бы срабатывает ещё один неизвестный мне клик от vm. введите сюда описание изображения.(выводил target при клике, здесь мышью сделан всего один клик). Из-за чего класс active через тогл сразу и добавляется, и убирается, оставляя страницу без перемен. Каким образом можно от этого избавиться?

3
  • Вероятно, main.js подключен к странице дважды (не обязательно буквально, он может и через импорты попадать в итоговый скрипт страницы). Поэтому, стоит проверить отсутствие подключения js-файла в разметке - если конфиг webpack'а типовой (настроен так как обычно рекомендуют в статьях и т.д.), то сборщик сам вставляет скрипты в страницу, и явно подключать их в разметке документа не требуется.
    – yar85
    24 июл 2021 в 18:51
  • @yar85 Да, действительно всё так и оказалось. При переносе даже не обратил на это внимания. Спасибо большое
    – Artsky
    26 июл 2021 в 8:13
  • Пожалуйста! Раз помогло, я рискну оформить ответом: т.к. проблема хоть и относится к категории "опечатка" (за что ответ может быть заминусован) - в принципе она воспроизводимая, и подсказка решения может оказаться полезной другим участникам.
    – yar85
    26 июл 2021 в 8:56

1 ответ 1

0

Ситуации повторного выполнения скрипта могут быть вызваны тем что скрипт дважды подключается к выходному документу: и в исходной разметке (в html-файле), и плагином сборщика (например, так может делать HtmlWebpackPlugin).
Проверить такую ситуацию можно обратив внимание на сгенерированный сборщиком документ. То есть, просмотрев либо полученную в результате сборки разметку, либо (через devtools браузера) список ассетов страницы в разделе "Sources".

В таких случаях автоматического встраивания собранных скриптов - устранить двойное выполнение скрипта можно просто убрав в исходном html-файле тот тег <script>, который подключает js-файлик явным (неавтоматическим) образом.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.