I have implemented a code for dragging containers left or right, which is functioning properly. Users can also click on the "thumb". However, I am facing an issue where a click event occurs even after dragging. I want to ensure that only either drag or click event happens. How can I separate these events? Additionally, it needs to be compatible with tablets as well.
var thumbContainer = document.querySelector('.aplbox-thumb-container'),
thumbContainerWrap = document.querySelector('.aplbox-thumb-container-wrap'),
startXThumb,
startTouchThumb
if ("ontouchstart" in window) {
thumbContainer.addEventListener("touchstart", dragStartThumb);
}
thumbContainer.addEventListener("mousedown", dragStartThumb);
function dragStartThumb(e) {
if (e.preventDefault) e.preventDefault();
e.stopPropagation()
if (!startTouchThumb) {
startTouchThumb = true;
document.addEventListener('mousemove', dragMoveThumb)
document.addEventListener('mouseup', dragEndThumb);
if ("ontouchstart" in window) {
document.addEventListener('touchmove', dragMoveThumb)
document.addEventListener('touchend', dragEndThumb);
}
var point;
if (e.type == 'touchstart') {
var touches = e.changedTouches;
if (touches.length > 1) {
return false;
}
point = touches[0];
e.preventDefault();
} else {
point = e;
e.preventDefault();
}
var currX = thumbContainer.style.transform.replace(/[^\d.]/g, '');
currX = parseInt(currX) || 0;
startXThumb = point.pageX + currX;
}
}
function dragMoveThumb(e) {
if (startTouchThumb) {
var point;
if (e.type == 'touchmove') {
var touches = e.changedTouches;
if (touches.length > 1) {
return false;
}
point = touches[0];
e.preventDefault();
} else {
point = e;
e.preventDefault();
}
var diff = point.pageX - startXThumb;
if (diff > 0) diff = 0;
else if (diff < -thumbContainer.offsetWidth + thumbContainerWrap.offsetWidth) diff = -thumbContainer.offsetWidth + thumbContainerWrap.offsetWidth;
thumbContainer.style.transform = 'translateX(' + diff + 'px)';
}
}
function dragEndThumb(e) {
e.stopPropagation()
if (startTouchThumb) {
startTouchThumb = false;
document.removeEventListener('mousemove', dragMoveThumb)
document.removeEventListener('mouseup', dragEndThumb);
if ("ontouchstart" in window) {
document.removeEventListener('touchmove', dragMoveThumb)
document.removeEventListener('touchend', dragEndThumb);
}
}
}
//click thumb
thumbContainerWrap.addEventListener('click', function(e) {
if (e.target.closest('.aplbox-thumb')) {
console.log('click')
}
}).aplbox-thumb-container-wrap {
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
width: 100%;
height: 100px;
overflow: hidden;
box-sizing: border-box;
}
.aplbox-thumb-container {
position: relative;
padding: 5px 0;
height: 100%;
display: flex;
flex-direction: row;
transform: translateX(0);
touch-action: none;
}
.aplbox-thumb {
width: 100px;
height: 70px;
margin-right: 5px;
box-sizing: border-box;
background: #333;
flex-shrink: 0;
overflow: hidden;
margin-bottom: 5px;
}<div class="aplbox-thumb-container-wrap">
<div class="aplbox-thumb-container" style="width: 1300px;">
<div class="aplbox-thumb" data-id="0"></div>
<div class="aplbox-thumb" data-id="1"></div>
<div class="aplbox-thumb" data-id="2"></div>
<div class="aplbox-thumb" data-id="3"></div>
<div class="aplbox-thumb" data-id="4"></div>
<div class="aplbox-thumb" data-id="5"></div>
<div class="aplbox-thumb" data-id="6"></div>
<div class="aplbox-thumb" data-id="7"></div>
<div class="aplbox-thumb" data-id="8"></div>
<div class="aplbox-thumb" data-id="9"></div>
<div class="aplbox-thumb" data-id="10"></div>
<div class="aplbox-thumb" data-id="11"></div>
</div>
</div>