I am working on a page where you can swipe between divs. So on an mobile device you can swipe left or right and on a computer you can click the mouse, hold down the button and drag the page left or right to go to the next div. This works in Chrome and in Safari.
In this div I also have images you can click (labels for hidden checkboxes). When clicking the image, the image becomes selected and visa versa. This also works the same in Chrome and in Safari.
Now the different behaviour:
When you open the page in Safari on a computer, you can click an image to make it selected and if you hover your mouse over an image, click and hold the mouse button down and swipe/drag to the left, you will slide to the other div AND THE IMAGE YOU HOVERED ABOVE IS NOT SELECTED/CLICKED (which is how it should work). In Chrome on the other hand, the image DOES get selected/clicked.
So even that they are both Webkit based browsers, they handle this differently. What I want is that Chrome behaves the same as Safari. So when clicking an image, select/deselect it, but when clicked and dragged: don't select/deselect the image.
Ofcourse I've tried solving this issue using google and checking this site, but I am stucked at the moment. I have tried things like:
let drag = false;
document.addEventListener('mousedown', () => drag = false);
document.addEventListener('mousemove', () => drag = true);
Thinking to solve it when you drag (mouse moves) you don't do the click event, but this didn't fix it (can also be my bad coding ofcourse) (code example found here: How to distinguish mouse "click" and "drag")
Sorry for the wall of text, I have a Fiddle here so you can check it out: https://jsfiddle.net/mauricederegt/dqyaphtf/9/
ps: all javascript, no jquery
