Горизонтальное нажатие и перетаскивание с помощью JS - предотвращение щелчка мышью

Question

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

Это моя ручка: https://codepen.io/omritk1/pen/qBByEoR. Моя проблема в том, что после прокрутки, при "mouseup", он вызывает щелчок по ссылке. Как я могу предотвратить это событие, а также позволить пользователю щелкнуть ссылку.

(я использовал это перо, чтобы установить JS: https://codepen.io/toddwebdev/pen/yExKoj)

const slider = document.querySelector('.catalog-list');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 1;
  slider.scrollLeft = scrollLeft - walk;
  console.log(walk);
});

.projects-catalog .catalog-slider {
    margin: 50px 0px;
}
.projects-catalog .catalog-cover {
    position: relative;
}
.projects-catalog ul {
    white-space: nowrap;
    overflow-x: auto;
}
.projects-catalog li {
    width: 75%;
    height: 200px;
}
li.catalog-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.projects-catalog li {
    display: inline-block;
    margin: 0 10px 0 0;
    width: 350px;
    height: 250px;
    background: #222;
}

<div class="projects-catalog">
  <div id="imageSlider1" class="catalog-slider">
    <div class="catalog-cover">
      <ul id="sliderWrapper1" class="catalog-list corporate-projects">
        <i id="prev1" class="fas fa-chevron-left move-left" style="display: flex;"></i>
        <a href="https://codepen.io/">
              <li class="catalog-item"></li>
          </a>
          <a href="https://codepen.io/">
              <li class="catalog-item"></li>
          </a>
          <a href="https://codepen.io/">
              <li class="catalog-item"></li>
          </a>
          <a href="https://codepen.io/">
              <li class="catalog-item"></li>
          </a>
          <a href="https://codepen.io/">
              <li class="catalog-item"></li>
          </a>
          <a href="https://codepen.io/">
              <li class="catalog-item"></li>
          </a>
          <a href="https://codepen.io/">
              <li class="catalog-item"></li>
          </a>
          <a href="https://codepen.io/">
                <li class="catalog-item"></li>
          </a>
          <a href="https://codepen.io/">
              <li class="catalog-item"></li>
          </a>
          <a href="https://codepen.io/">
              <li class="catalog-item"></li>
          </a>
        <i id="next1" class="fas fa-chevron-right move-right"></i>
      </ul>
    </div>
  </div>
</div>

Answer 1

Похоже, дубликат это .

Попробуйте приведенный ниже фрагмент.

      const slider = document.querySelector(".catalog-list");
      const preventClick = (e) => {
        e.preventDefault();
        e.stopImmediatePropagation();
      }
      let isDown = false;
      let isDragged = false;
      let startX;
      let scrollLeft;

      slider.addEventListener("mousedown", e => {
        isDown = true;
        slider.classList.add("active");
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
      });
      slider.addEventListener("mouseleave", () => {
        isDown = false;
        slider.classList.remove("active");
      });
      slider.addEventListener("mouseup", (e) => {
        isDown = false;
        const elements = document.querySelectorAll("a");
        if(isDragged){
            for(let i = 0; i<elements.length; i++){
                  elements[i].addEventListener("click", preventClick);
            }
        }
        else{
            for(let i = 0; i<elements.length; i++){
                  elements[i].removeEventListener("click", preventClick);
            }
        }
        slider.classList.remove("active");
        isDragged =  false;
      });
      slider.addEventListener("mousemove", e => {
        if (!isDown) return;
        isDragged =  true;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * 2;
        slider.scrollLeft = scrollLeft - walk;
        console.log(walk);
      });

.projects-catalog .catalog-slider {
  margin: 50px 0px;
}

.projects-catalog .catalog-cover {
  position: relative;
}

.projects-catalog ul {
  white-space: nowrap;
  overflow-x: auto;
}

.projects-catalog li {
  width: 75%;
  height: 200px;
}

li.catalog-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.projects-catalog li {
  display: inline-block;
  margin: 0 10px 0 0;
  width: 350px;
  height: 250px;
  background: #222;
}

<div class="projects-catalog">
  <div id="imageSlider1" class="catalog-slider">
    <div class="catalog-cover">
      <ul id="sliderWrapper1" class="catalog-list corporate-projects">
        <i id="prev1" class="fas fa-chevron-left move-left" style="display: flex;"></i>
        <a href="https://codepen.io/">
          <li class="catalog-item"></li>
        </a>
        <a href="https://codepen.io/">
          <li class="catalog-item"></li>
        </a>
        <a href="https://codepen.io/">
          <li class="catalog-item"></li>
        </a>
        <a href="https://codepen.io/">
          <li class="catalog-item"></li>
        </a>
        <a href="https://codepen.io/">
          <li class="catalog-item"></li>
        </a>
        <a href="https://codepen.io/">
          <li class="catalog-item"></li>
        </a>
        <a href="https://codepen.io/">
          <li class="catalog-item"></li>
        </a>
        <a href="https://codepen.io/">
          <li class="catalog-item"></li>
        </a>
        <a href="https://codepen.io/">
          <li class="catalog-item"></li>
        </a>
        <a href="https://codepen.io/">
          <li class="catalog-item"></li>
        </a>
        <i id="next1" class="fas fa-chevron-right move-right"></i>
      </ul>
    </div>
  </div>
</div>

Answer 2

Добавьте это в ваш файл CSS

.active .catalog-item {
  pointer-events: none;
}

РЕДАКТИРОВАТЬ: Кредиты: https://stackoverflow.com/a/24273710/5757893

РЕДАКТИРОВАТЬ: Затем удалите следующую строку из события mousedown

slider.classList.add('active');

И добавьте его к методу события mousemove следующим образом:

if (Math.abs(startX - e.pageX) > 10) {
  slider.classList.add('active');
}

Так что если вы начнете перетаскивать по крайней мере 10 пикселей, он не будет регистрировать события указателя, но если вы не переместились слишком сильно, он 'останется, нажмите на ссылку.