javascript - 使用 JS 水平单击和拖动滚动 - 防止单击 mouseup

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

看起来像 this 的副本.

试试下面的代码片段。

      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>