Здравствуйте. Сделал галерею типа: "интересные статьи". Скролл с помощью мыши работает, но через раз. С помощью $(this).bind('click', stop) попытался предотвратить срабатывание на переход по ссылке. Но работает через раз. Первый раз когда начинаю двигать курсор переход по ссылке все равно срабатывает.
Подскажите, пожалуйста, где исправить. Вопрос задаю первый раз, если что не так сделал, скажите - исправлю
$(document).ready(function() {
const LINK = $('.JS_DragScroll .carusel_review-item'),
FIELD = $('.JS_DragScroll');
let startClick = 0,
endClick = 0,
currentDate = () => Date.now();
LINK.each(function() {
$(this).bind('click', stop)
})
FIELD.mousedown(function() {
startClick = currentDate();
LINK.each(function() {
$(this).bind('click', stop);
})
})
FIELD.mouseup(function() {
endClick = currentDate();
if(endClick - startClick < 500) {
LINK.each(function() {
$(this).unbind('click', stop);
})
}
})
function stop() {
return false;
}
})
$(document).ready(function() {
(function() {
const scrollBox = document.querySelectorAll('.JS_DragScroll'),
lengthSB = scrollBox.length;
let left = 0, // отпустили мышку - сохраняем положение скролла
drag = false,
coorX = 0; // нажали мышку - сохраняем координаты.
for(i = 0; i < lengthSB; i++) {
scrollBox[i].ondragstart = function() {
return false;
}
}
for(i = 0; i < lengthSB; i++) {
scrollBox[i].addEventListener('mousedown', function(e) {
drag = true;
coorX = e.pageX - this.offsetLeft;
})
}
document.addEventListener('mouseup', function() {
drag = false;
for(i = 0; i < lengthSB; i++) {
left = scrollBox[i].scrollLeft;
}
})
for(i = 0; i < lengthSB; i++) {
scrollBox[i].addEventListener('mousemove', function(e) {
if (drag) {
this.scrollLeft = left - (e.pageX - this.offsetLeft - coorX);
}
})
}
})()
})
<div class="carusel_review-wrap">
<div class="carusel_review-box JS_DragScroll">
<div class="carusel_review-item" id="1">
<div class="carusel_review-item-body">
<a href="#4">Ссылка1</a>
</div>
</div>
<div class="carusel_review-item" id="2">
<div class="carusel_review-item-body">
<a href="#5">Ссылка2</a>
</div>
</div>
<div class="carusel_review-item" id="3">
<div class="carusel_review-item-body">
<a href="#5">Ссылка3</a>
</div>
</div>
<div class="carusel_review-item" id="4">
<div class="carusel_review-item-body">
<a href="#1">Ссылка4</a>
</div>
</div>
<div class="carusel_review-item" id="5">
<div class="carusel_review-item-body">
<a href="#2">Ссылка5</a>
</div>
</div>
</div>
</div>
/* стили wrap */
.carusel_review-wrap {
background-color: #f3f4f8;
margin: 10px 10px;
padding: 10px;
}
/* стили box */
.carusel_review-box {
display: flex;
width: 100%;
overflow-x: scroll;
border-radius: 5px;
-ms-overflow-style: none;
scrollbar-width: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.carusel_review-box::-webkit-scrollbar { width: 0; }
/* стили item */
.carusel_review-item {
box-sizing: border-box;
border-radius: 5px;
background-color: #fff;
min-width: 75%;
padding: 10px;
text-align: center;
}
.carusel_review-item:not(:last-child) {
margin-right: 10px;
}
.carusel_review-item-body a {
display: block;
}