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-файлик явным (неавтоматическим) образом.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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