Как запретить переход по ссылке при движении мышкой?
Есть конструкция с полосой прокрутки, которую можно двигать мышкой, но проблема в том что если зажать мышку передвинуть в сторону и отжать происходит переход по ссылке, как сделать так чтоб этого перехода при движении мышкой не было.
Код ниже
const slider = document.querySelector('.scroll');
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; //scroll-fast
slider.scrollLeft = scrollLeft - walk;
console.log(walk);
}); .scroll { position: relative; width: 100%;overflow-x: auto;overflow-y: hidden; user-select: none; cursor: pointer;height: 300px;visibility: hidden; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.scroll:hover {visibility: visible; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.scroll.active { background: rgba(255,255,255,0.3); cursor: grabbing; cursor: -webkit-grabbing;}
.scroll::-webkit-scrollbar { width: 10px;}
.scroll::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa;}
.scroll::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);box-shadow: inset 0 0 6px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: black;
-o-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);}
.slider {visibility: visible; position: absolute; display: flex;left: 5px; }
.filmhit {width: 180px;height: 250px;overflow: hidden;border-radius: 25px; display: inline-flex;position: relative;text-align: center; border: 2px solid black;}
.filmhit a span {position: absolute; z-index: 2;top: 206px; height: 40px;overflow: hidden;width: 100%;display: flex;align-items: center;justify-content: center;}
.filmhit img {width: 100%;height: 100%;position: absolute;}
.filmshadow {opacity: 0; width: 100%;height: 100%;border-radius: 25px; display: block;overflow: hidden;position: absolute;background: rgba(0,0,0,0.53) url(../images/style/slider1_play.png) no-repeat center;
z-index: 2; line-height: 200px; -moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.filmhit:hover .filmshadow {opacity: 1;}
.filmhit a::before { bottom: 0; content: ""; display: block; position: absolute; z-index: 2; height: 120px; width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 100%);} <div class="scroll" >
<div class="slider">
<div class="filmhit">
<a href="https://sefil.ru/films/483-forsazh-the-fast-and-the-furious-2001.html" title="Форсаж / The Fast and the Furious (2001)"><div class="filmshadow"></div>
<img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Форсаж / The Fast and the Furious (2001) (The Fast and the Furious) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Форсаж / The Fast and the Furious (2001)" />
<span>Форсаж / The Fast and the Furious (2001)</span>
</a>
</div>
<div class="filmhit">
<a href="https://sefil.ru/films/33-posledniy-bogatyr-koren-zla-2020.html" title="Последний богатырь: Корень зла (2020)"><div class="filmshadow"></div>
<img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Русский Фильм Последний богатырь: Корень зла (2020) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Последний богатырь: Корень зла (2020)" />
<span>Последний богатырь: Корень зла (2020)</span>
</a>
</div>
<div class="filmhit">
<a href="https://sefil.ru/films/12-mulan-mulan-2020.html" title="Мулан / Mulan (2020)"><div class="filmshadow"></div>
<img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Мулан / Mulan (2020) (Mulan) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Мулан / Mulan (2020)" />
<span>Мулан / Mulan (2020)</span>
</a>
</div>
<div class="filmhit">
<a href="https://sefil.ru/films/34-posledniy-bogatyr-2017.html" title="Последний богатырь (2017)"><div class="filmshadow"></div>
<img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Русский Фильм Последний богатырь (2017) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Последний богатырь (2017)" />
<span>Последний богатырь (2017)</span>
</a>
</div>
<div class="filmhit">
<a href="https://sefil.ru/films/19-prostaya-prosba-a-simple-favor-2018.html" title="Простая просьба (2018)"><div class="filmshadow"></div>
<img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Простая просьба (2018) (A Simple Favor) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Простая просьба (2018)" />
<span>Простая просьба (2018)</span>
</a>
</div>
<div class="filmhit">
<a href="https://sefil.ru/films/18-most-v-terabitiyu-bridge-to-terabithia-2006.html" title="Мост в Терабитию (2006)"><div class="filmshadow"></div>
<img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Мост в Терабитию (2006) (Bridge to Terabithia) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Мост в Терабитию (2006)" />
<span>Мост в Терабитию (2006)</span>
</a>
</div>
<div class="filmhit">
<a href="https://sefil.ru/films/17-misterium-ohotniki-na-fazanov-fasandraeberne-2014.html" title="Мистериум: Охотники на фазанов (2014)"><div class="filmshadow"></div>
<img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Мистериум: Охотники на фазанов (2014) (Fasandræberne) смотреть онлайн, а также трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Мистериум: Охотники на фазанов (2014)" />
<span>Мистериум: Охотники на фазанов (2014)</span>
</a>
</div>
<div class="filmhit">
<a href="https://sefil.ru/films/16-pipec-kick-ass-2010.html" title="Пипец (2010)"><div class="filmshadow"></div>
<img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Пипец (2010) (Kick-Ass) смотреть онлайн, а также трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Пипец (2010)" />
<span>Пипец (2010)</span>
</a>
</div>
<div class="filmhit">
<a href="https://sefil.ru/films/15-pulya-bullet-2013.html" title="Пуля (2013)"><div class="filmshadow"></div>
<img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Пуля (2013) (Bullet) смотреть онлайн, а также трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Пуля (2013)" />
<span>Пуля (2013)</span>
</a>
</div>
<div class="filmhit">
<a href="https://sefil.ru/films/13-11-intouchables-2011.html" title="1+1 (2011)"><div class="filmshadow"></div>
<img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм 1+1 (2011) (Intouchables) трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="1+1 (2011)" />
<span>1+1 (2011)</span>
</a>
</div>
</div>
</div>Источник: Stack Overflow на русском