title: prevent click when leave drag to scroll in js
body: <p>I have a horizontal scroll div that is also draggable. 
  The elements which inside this div are links. every time I leave the drag it fire the click and send me to the link. 
  Is there a way that I could prevent the click after leaving the drag but keep it available when not dragging? </p>
  
  <p>here's a snippet:</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('.wrapper');
  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)*2;
      slider.scrollLeft = scrollLeft - walk;
  });
  
  document.getElementsByClassName('.book').ondragstart = function() { return false; };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      overflow: auto;
      min-width: 100%;
  }
  
  .book {
      width: auto;
      height: 100vh;
      min-width: 50vw;
  }
  
  .one {
    background-color: #d07fe0;
    }
    
  .two {
    background-color: #808888;
    }
    
  .three {
    background-color: #83e7dc;
    }
    
  .four {
    background-color: #edf7a8;
    }
    
  .five {
    background-color: #e9d98f;
    }
    
  .six {
    background-color: #fdd;
    }
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class="wrapper"&gt;
      &lt;a href="https://stackoverflow.com/" class="book one"&gt;&lt;/a&gt;
      &lt;a href="https://stackoverflow.com/" class="book two"&gt;&lt;/a&gt;
      &lt;a href="https://stackoverflow.com/" class="book three"&gt;&lt;/a&gt;
      &lt;a href="https://stackoverflow.com/" class="book four"&gt;&lt;/a&gt;
      &lt;a href="https://stackoverflow.com/" class="book five"&gt;&lt;/a&gt;
      &lt;a href="https://stackoverflow.com/" class="book six"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would appreciate any help.
  thanks!
  nir</p>