2

При клике обработчик события срабатывает два раза.
А нужно, что бы срабатывал один раз.
Из-за этого не получается отобразить/скрыть элемент при клике. Гугл не отвечает. Подскажите, что делать?

(function() {
  var classToggle = 'js-toggleSwitchingContent',
    classContent = 'js-switchingContent',
    classIsActive = 'is-active',
    toggles = document.querySelectorAll('.' + classToggle);

  for (var i = 0; i < toggles.length; i++) {
    var toggle = toggles[i];
    toggle.addEventListener('click', toggleClickHundler);
  }

  var content;

  function toggleClickHundler(e) {
    console.log("toggleClickHundler", e.target.tagName, e.target.getAttribute("class"));

    content = this.nextElementSibling;
    if (content.classList.contains(classContent)) {
      content.classList.toggle(classIsActive);
    }
  }
})();
<div class="toggle js-toggleSwitchingContent">
  <label class="toggle__fakeLabel">
            <input class="toggle__fakeCheckbox" name="" type="checkbox">
            <div class="toggle__line">
                <div class="toggle__spot"></div>
            </div>
    </label>
</div>
<div class="switchingContent js-switchingContent">
  content_here
</div>

2
  • Ну исходя из кода судя по всему у вас несклько элементов в массиве toggles, вы вешаете обработчик на несколько элементов идёт всплытие вызываются соответственно все обработчики клика. для более подробного надо иметь полный код.
    – EVG
    16 июл 2018 в 19:06
  • toggles.length == 1
    – Rabbit
    16 июл 2018 в 19:08

2 ответа 2

2

Вешайте конкретно на input событие.

(function() {
  var classToggle = 'toggle__fakeCheckbox',
    classContent = 'js-switchingContent',
    classIsActive = 'is-active',
    toggles = document.querySelectorAll('.' + classToggle);

  for (var i = 0; i < toggles.length; i++) {
    var toggle = toggles[i];
    toggle.addEventListener('click', toggleClickHundler);
  }

  var content;

  function toggleClickHundler(e) {
    console.log("toggleClickHundler");
    content = this.parentNode.parentNode.nextElementSibling;
    console.log(content)
    if (content.classList.contains(classContent)) {
      content.classList.toggle(classIsActive);
    }
  }
})();
<div class="toggle js-toggleSwitchingContent">
  <label class="toggle__fakeLabel">
            <input class="toggle__fakeCheckbox" name="" type="checkbox">
            <div class="toggle__line">
                <div class="toggle__spot"></div>
            </div>
    </label>
</div>
<div class="switchingContent js-switchingContent">
  content_here
</div>

4
  • Или событие click для label повесть нужно в return false" Каким образом это лучше сделать?
    – Rabbit
    16 июл 2018 в 20:39
  • @Rabbit добавил.
    – EVG
    16 июл 2018 в 21:29
  • @EVG Обработчик, тем не менее, во втором фрагменте вызывается дважды при клике на текст лейбла.
    – user176262
    16 июл 2018 в 21:35
  • 2
    @Igor да действительно. Удаляю,не работает. Значет надо всецело переписывать поведение label и input под эти нужды, ну или что правильней.не вешать на label или делать проверку но событие всёравно будет вызываться
    – EVG
    16 июл 2018 в 22:44
1

(function() {
  var classToggle = 'js-toggleSwitchingContent',
    classContent = 'js-switchingContent',
    classIsActive = 'is-active',
    toggles = document.querySelectorAll('.' + classToggle + " input[type='checkbox']");

  for (var i = 0; i < toggles.length; i++) {
    var toggle = toggles[i];
    toggle.addEventListener('click', toggleClickHundler);
  }

  var content;

  function toggleClickHundler(e) {
    console.log("toggleClickHundler", e.target.tagName, e.target.getAttribute("class"));

    content = this.closest(".toggle").nextElementSibling;
    content.classList.toggle(classIsActive);
  }
})();
.switchingContent {
  display:none;
  height:30px;
  border:1px solid blue;
  background-color:lightgreen;
}

.is-active {
  display:block;
}
<div class="toggle js-toggleSwitchingContent">
  <label class="toggle__fakeLabel">Test
            <input class="toggle__fakeCheckbox" name="" type="checkbox">Test
            <div class="toggle__line">
                <div class="toggle__spot"></div>
            </div>
    </label>
</div>
<div class="switchingContent js-switchingContent">
  content_here
</div>

Ваш ответ

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

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