Отменить клик после перетаскивания-прокрутки. JS

Question

Пытаюсь сделать горизонтальный скролл тегов, но при перетаскивании видимой области происходит (mouseup) клик на ссылках. Как разделить перетаскивание и клик. Чтоб ссылки были кликабельные, но при перетаскивании они не срабатывали? +работа по классу, тк. блоков несколько.

http://jsfiddle.net

var scr = $(".scroll");
scr.mousedown(function(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
  var startX = this.scrollLeft + event.pageX;
  var startY = this.scrollTop + event.pageY;
  
  scr.mousemove(function() {
    this.scrollLeft = startX - event.pageX;
    this.scrollTop = startY - event.pageY;
    scr.mouseup(function() {
      scr.off("mousemove");
      return false;
    });
    scr.click(function() {
      //return false;
    });
  });
  
});

.scroll{
  overflow-y: auto;
  cursor: pointer;
}
.scroll-q{
  display: block;
  white-space: nowrap;
}

.specstag {
    display: inline-block;
    font-size: 98%;
    font-weight: 600;
    background: #fff700;
    border: 1px solid #ccc;
    border-radius: 16px;
    padding: 8px 18px;
    cursor: pointer;
    text-decoration: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="scroll">
  <div class="scroll-q">
    <a href="/" class="specstag" title="Best price">Best price</a>
        <a href="/" class="specstag" title="Без категории">Без категории</a>
        <a href="/" class="specstag" title="Low price">Low price</a>
        <a href="/" class="specstag" title="New!!!">New!!!</a>
        <a href="/" class="specstag" title="Top rated">Top rated</a>
        <a href="/" class="specstag" title="Б/У-шка">Б/У-шка</a>
        <a href="/" class="specstag" title="Android 10">Android 10</a>
        <a href="/" class="specstag" title="SmartTV">SmartTV</a>
        <a href="/" class="specstag" title="IOSx">IOSx</a>
        <a href="/" class="specstag" title="Новинка!">Новинка!</a>
  </div>
</div>


<div class="scroll">
  <div class="scroll-q">
    <a href="/" class="specstag" title="Best price">Best price</a>
        <a href="/" class="specstag" title="Без категории">Без категории</a>
        <a href="/" class="specstag" title="Low price">Low price</a>
        <a href="/" class="specstag" title="New!!!">New!!!</a>
        <a href="/" class="specstag" title="Top rated">Top rated</a>
        <a href="/" class="specstag" title="Б/У-шка">Б/У-шка</a>
        <a href="/" class="specstag" title="Android 10">Android 10</a>
        <a href="/" class="specstag" title="SmartTV">SmartTV</a>
        <a href="/" class="specstag" title="IOSx">IOSx</a>
        <a href="/" class="specstag" title="Новинка!">Новинка!</a>
  </div>
</div>

Answer 1

Попробуйте

scr.mousemove(function() {
  link.style.pointerEvents = "none"
  ...
})

А потом снять

scr.mouseup(function() {
  setTimeout(() => link.style.pointerEvents = "all", 100)
})

Answer 2

Во-первых, вместо постоянных подключений и отключений слушателей событий, лучше установить слушателей один раз и потом управлять какими-нибудь флагами. Это могут быть, например, глобальные переменные.

Во-вторых, вам надо отменить событие перетаскивания ссылок (событие ondragstart).

В-третих, отслеживать onmouseup лучше у window, чем у самого блока. Это полезно, когда "отжатие" кнопки мыши происходит вне блока. Плюс, также полезно слушать событие blur у того же window. Это полезно, когда "отжатие" кнопки мыши происходит вне окна.

В-четвертых, у событий по перемещению курсора есть полезные свойства movementX и movementY.

В-пятых, ну а что впятых? Просто отменить клик на ссылках при перемещении как в коде ниже.

UPDATE

Добавил код, прячущий отображение скролла:

.scroll{
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
  scrollbar-visibility: hidden;
}
.scrol::-webkit-scrollbar { 
    display: none; /* Chrome Safari */
}

var movement = false;
var mousedown = false;

function onMouseMove(e){
  e.preventDefault();
  e.stopPropagation();
  if(mousedown) {
    movement = true;
    this.scrollLeft -= event.movementX;
    this.scrollTop -= event.movementY;
  }
}

function onMouseDown(){
  mousedown = true;
  movement = false;
}

function onMouseUp(e){
  mousedown = false;
  setTimeout(()=>movement = false, 10);
}

function onMouseClick(e){
  if(movement){
    e.preventDefault();
    e.stopPropagation();
  }
}

function onDragStart(e){
  e.preventDefault();
  e.stopPropagation();
}

var scr = $(".scroll");

scr.mousemove(onMouseMove);
scr.mousedown(onMouseDown);
$(window).mouseup(onMouseUp);
window.addEventListener('dragstart',onDragStart);
window.addEventListener('blur',onMouseUp);
$('.scroll a').click(onMouseClick);

.scroll{
  overflow-y: auto;
  cursor: pointer;
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
  scrollbar-visibility: hidden;
}
.scrol::-webkit-scrollbar { 
    display: none; /* Chrome Safari */
}

.scroll-q{
  display: block;
  white-space: nowrap;
}

.specstag {
    display: inline-block;
    font-size: 98%;
    font-weight: 600;
    background: #fff700;
    border: 1px solid #ccc;
    border-radius: 16px;
    padding: 8px 18px;
    cursor: pointer;
    text-decoration: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="scroll">
  <div class="scroll-q">
    <a href="/" class="specstag" title="Best price">Best price</a>
        <a href="/" class="specstag" title="Без категории">Без категории</a>
        <a href="/" class="specstag" title="Low price">Low price</a>
        <a href="/" class="specstag" title="New!!!">New!!!</a>
        <a href="/" class="specstag" title="Top rated">Top rated</a>
        <a href="/" class="specstag" title="Б/У-шка">Б/У-шка</a>
        <a href="/" class="specstag" title="Android 10">Android 10</a>
        <a href="/" class="specstag" title="SmartTV">SmartTV</a>
        <a href="/" class="specstag" title="IOSx">IOSx</a>
        <a href="/" class="specstag" title="Новинка!">Новинка!</a>
  </div>
</div>


<div class="scroll">
  <div class="scroll-q">
    <a href="/" class="specstag" title="Best price">Best price</a>
        <a href="/" class="specstag" title="Без категории">Без категории</a>
        <a href="/" class="specstag" title="Low price">Low price</a>
        <a href="/" class="specstag" title="New!!!">New!!!</a>
        <a href="/" class="specstag" title="Top rated">Top rated</a>
        <a href="/" class="specstag" title="Б/У-шка">Б/У-шка</a>
        <a href="/" class="specstag" title="Android 10">Android 10</a>
        <a href="/" class="specstag" title="SmartTV">SmartTV</a>
        <a href="/" class="specstag" title="IOSx">IOSx</a>
        <a href="/" class="specstag" title="Новинка!">Новинка!</a>
  </div>
</div>

БЛОГ НА HUSL

Отменить клик после перетаскивания-прокрутки. JS

Ответы (2 шт):