title: Horizontal Click and Drag Scrolling with JS - Prevent click on mouseup
body: <p>I have created a horizontal projects gallery.
  I want to let the visitor drag right &amp; left to scroll.</p>
  
  <p>This is my pen: <a href="https://codepen.io/omritk1/pen/qBByEoR" rel="noreferrer">https://codepen.io/omritk1/pen/qBByEoR</a>. 
  My problem is that after the scroll, on "mouseup", it triggers click on the link.
  <strong>How can I prevent this event but also let the user click on the link.</strong></p>
  
  <p>(I have used this pen as to set the JS: <a href="https://codepen.io/toddwebdev/pen/yExKoj" rel="noreferrer">https://codepen.io/toddwebdev/pen/yExKoj</a>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const slider = document.querySelector('.catalog-list');
  let isDown = false;
  let startX;
  let scrollLeft;
  
  slider.addEventListener('mousedown', (e) =&gt; {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
  });
  slider.addEventListener('mouseleave', () =&gt; {
    isDown = false;
    slider.classList.remove('active');
  });
  slider.addEventListener('mouseup', () =&gt; {
    isDown = false;
    slider.classList.remove('active');
  });
  slider.addEventListener('mousemove', (e) =&gt; {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 1;
    slider.scrollLeft = scrollLeft - walk;
    console.log(walk);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="projects-catalog"&gt;
    &lt;div id="imageSlider1" class="catalog-slider"&gt;
      &lt;div class="catalog-cover"&gt;
        &lt;ul id="sliderWrapper1" class="catalog-list corporate-projects"&gt;
          &lt;i id="prev1" class="fas fa-chevron-left move-left" style="display: flex;"&gt;&lt;/i&gt;
          &lt;a href="https://codepen.io/"&gt;
                &lt;li class="catalog-item"&gt;&lt;/li&gt;
            &lt;/a&gt;
            &lt;a href="https://codepen.io/"&gt;
                &lt;li class="catalog-item"&gt;&lt;/li&gt;
            &lt;/a&gt;
            &lt;a href="https://codepen.io/"&gt;
                &lt;li class="catalog-item"&gt;&lt;/li&gt;
            &lt;/a&gt;
            &lt;a href="https://codepen.io/"&gt;
                &lt;li class="catalog-item"&gt;&lt;/li&gt;
            &lt;/a&gt;
            &lt;a href="https://codepen.io/"&gt;
                &lt;li class="catalog-item"&gt;&lt;/li&gt;
            &lt;/a&gt;
            &lt;a href="https://codepen.io/"&gt;
                &lt;li class="catalog-item"&gt;&lt;/li&gt;
            &lt;/a&gt;
            &lt;a href="https://codepen.io/"&gt;
                &lt;li class="catalog-item"&gt;&lt;/li&gt;
            &lt;/a&gt;
            &lt;a href="https://codepen.io/"&gt;
                  &lt;li class="catalog-item"&gt;&lt;/li&gt;
            &lt;/a&gt;
            &lt;a href="https://codepen.io/"&gt;
                &lt;li class="catalog-item"&gt;&lt;/li&gt;
            &lt;/a&gt;
            &lt;a href="https://codepen.io/"&gt;
                &lt;li class="catalog-item"&gt;&lt;/li&gt;
            &lt;/a&gt;
          &lt;i id="next1" class="fas fa-chevron-right move-right"&gt;&lt;/i&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>