css Javascript防止发生拖动时点击起火

xfb7svmp  于 2023-01-14  发布在  Java
关注(0)|答案(1)|浏览(134)

我正在使用这段代码来向左/右拖动容器。这很好用。用户也可以点击"拇指"。问题是点击也发生在拖动之后。它应该是拖动或点击。我如何隔离一个或另一个呢?当然它必须在平板电脑上工作。

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>
xmakbtuz

xmakbtuz1#

声明变量moved。在dragStartThumb函数中将此变量设置为false,在dragMoveThumb函数中将其设置为true,并在onclick事件中检查此变量。如下所示。
类似于@Amirhoseinh73写的,但是我们没有在touchend函数中将标志设置为true,而是在mousemove函数中将标志设置为true,因为我们不希望将always变量设置为true。

var thumbContainer = document.querySelector('.aplbox-thumb-container'),
  thumbContainerWrap = document.querySelector('.aplbox-thumb-container-wrap'),
  startXThumb,
  startTouchThumb
  
let moved = false;

if ("ontouchstart" in window) {
  thumbContainer.addEventListener("touchstart", dragStartThumb);
}
thumbContainer.addEventListener("mousedown", dragStartThumb);

function dragStartThumb(e) {
   moved = false;
    
  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) {
  moved = true;
    
  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') && !moved) {

    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>

相关问题