Question

我创建了一个水平项目画廊。我想让访客向右和向左拖动以滚动。

这是我的笔：https://codepen.io/omritk1/pen/qBByEoR。我的问题是滚动后，在“鼠标”上，它会触发单击链接。 如何阻止此事件，但又允许用户单击链接。

（我用这支笔来设置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>

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个像素，则不会注册指针事件，但是如果移动不太多，它将保持点击状态。

使用JS进行水平单击和拖动滚动-防止在mouseup上单击

2 个答案: