Quantcast
Channel: User Francesco - Stack Overflow
Viewing all articles
Browse latest Browse all 39

JS Mouse click and Drag Instead of Horizontal Scroll bar preventing click

$
0
0

I'm trying to drag a carousel of images linked with href to a separate page.

this is the code I found it works

let mouseDown = false;let startX, scrollLeft;const slider = document.querySelector('.carousel');const startDragging = (e) => {  mouseDown = true;  startX = e.pageX - slider.offsetLeft;  scrollLeft = slider.scrollLeft;}const stopDragging = (e) => {  mouseDown = false;}const move = (e) => {  e.preventDefault();  if(!mouseDown) { return; }  const x = e.pageX - slider.offsetLeft;  const scroll = x - startX;  slider.scrollLeft = scrollLeft - scroll;}// Add the event listenersslider.addEventListener('mousemove', move, false);slider.addEventListener('mousedown', startDragging, false);slider.addEventListener('mouseup', stopDragging, false);slider.addEventListener('mouseleave', stopDragging, false);

but I have an issue:

when I release the drag, the page fires the link. How do I prevent that?

thanks


Viewing all articles
Browse latest Browse all 39

Latest Images

Trending Articles



Latest Images