1

Как отменить действие при повторном нажатии?

document.querySelector(".menu").onclick = function() {
  document.body.style.overflow = 'hidden';
}
1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 7 апр 2022 в 15:29

3 ответа 3

2

Вот вам решение )
Данным способом вы сможете нажать на элемент только один раз до перезагрузки страницы

document.querySelector(".menu").addEventListener("click", function() {
  console.log(1);
  document.body.style.overflow = 'hidden';
}, {once: true});
<div class="menu">1234567890</div>

1

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

var flag = false;
document.querySelector(".menu").onclick = function() {
  document.body.style.overflow = 'hidden';
  flag = true;
}
if(flag){
  //Код. Например
  document.body.style.overflow = 'auto';
}
4
  • 1
    flag = !flag тогда уж 7 апр 2022 в 16:15
  • @VladimirGonchar Почему? Надо же при повторном клике выполнить что-то
    – Pashok
    7 апр 2022 в 16:16
  • Я так понимаю, человек хочет обычный на 2 состояния. Нажал 1 раз - одно, второй раз - другое, третий раз - снова первое. Поэтому флаг просто с true на false меняется, и обратно 7 апр 2022 в 16:20
  • @VladimirGonchar А, если так то можно и переделать
    – Pashok
    7 апр 2022 в 16:22
0

Если конкретно с Вашим примером При каждом клике проверяем текущее значение style.overflow Если оно не равно hidden, установить hidden, иначе auto

document.querySelector(".menu").onclick = function() {
  const target = document.body.style;
  target.overflow = target.overflow !== "hidden" ? "hidden" : "auto";
}

Вместо Условного оператора можете использовать что-то подобное:

if (document.body.style.overflow === "hidden")
  document.body.style.overflow = "auto";
else
  document.body.style.overflow = "hidden";

Ваш ответ

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

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