События касания не работают на нескольких модальных блоках

Question

Я пытаюсь заставить сенсорные события функционировать на нескольких модальных блоках, чтобы при нажатии на кнопку, чтобы открыть модальное окно на телефоне, вы проводите влево / вправо внутри модального поля, и вы должны получить предупреждение окно, сообщающее вам, каким образом вы провели , но затем функция перестает работать все вместе, и никакие предупреждения не отображаются.

Я воссоздал свою проблему со всем кодом на Codepen , но здесь приведен фрагмент сценария js и части html, которые я подозреваю как нарушителей спокойствия.

Я застрял в этом вопросе уже два дня и начинаю сомневаться в своем интеллекте. Есть ли очевидное решение, которого я здесь не вижу?

Заранее большое спасибо!

// i suspect that a part of the problem starts within the function "init()"
var lbl;
function init() {
  lbl = document.getElementById("modalSwipe");

  lbl.addEventListener("touchstart", startTouch, false);
  lbl.addEventListener("touchend", endTouch, false);
  lbl.addEventListener("touchmove", moveTouch, false);
}

var initialX = null;
var initialY = null;

function startTouch(e) {
  initialX = e.touches[0].clientX;
  initialY = e.touches[0].clientY;
}

function endTouch() {
  initialX = null;
  initialY = null;
}

function moveTouch(e) {
  if (initialX === null) {
    return;
  }
  if (initialY === null) {
    return;
  }
  var currentX = e.touches[0].clientX;
  var currentY = e.touches[0].clientY;
  var diffX = initialX - currentX;
  var diffY = initialY - currentY;

  if (Math.abs(diffX) > Math.abs(diffY)) {
    // sliding horizontally
    if (diffX > 0) {
      alert("Left"); // swiped left
    } else {
      alert("Right"); // swiped right
    }
  } else {
    return;
  }
  e.preventDefault();
}

<section>
  <button class='button modalButton'>Modal 1</button>
  <!--and the other part of the problem lies here with modalSwipe -->
  <div class='modal modalid' id="modalSwipe">
    <div class='modal-content'>
      <!-- no content for simplicity -->
      <div class='modal-header'>
        <span class='close'>X</span>
        <h2>Modal 1</h2>
      </div>
    </div>
  </div>
</section>

Answer 1

Глядя на ваш Codepen, я заметил, что вы используете один и тот же идентификатор (modalSwipe) для своих модалов.

Идентификаторы не должны использоваться повторно для нескольких элементов.

Вместо этого вам следует попробовать используйте имена классов и найдите активный модал. Вы можете сделать это, добавив дополнительный класс active к активному модалу. Как только вы закроете модал, класс active должен быть удален.