我正在使用这段代码来向左/右拖动容器。这很好用。用户也可以点击"拇指"。问题是点击也发生在拖动之后。它应该是拖动或点击。我如何隔离一个或另一个呢?当然它必须在平板电脑上工作。
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>
1条答案
按热度按时间xmakbtuz1#
声明变量
moved
。在dragStartThumb
函数中将此变量设置为false,在dragMoveThumb
函数中将其设置为true,并在onclick
事件中检查此变量。如下所示。类似于@Amirhoseinh73写的,但是我们没有在
touchend
函数中将标志设置为true,而是在mousemove
函数中将标志设置为true,因为我们不希望将always变量设置为true。