Почему бегунок движется при наведении на него указателя мыши, после того как кнопка была отпущена?

Question

let thumb = slider.querySelector('.thumb');

thumb.onpointerdown = function(event) {
  event.preventDefault();
  thumb.setPointerCapture(event.pointerId);

  let shiftX = event.clientX - thumb.getBoundingClientRect().left;

  thumb.ongotpointercapture = () => {
    thumb.onpointermove = function(event) {
      let newLeft = event.clientX - slider.getBoundingClientRect().left;
      if (newLeft < 0) {
        newLeft = 0;
      }
    
      let rightEdge = slider.offsetWidth - thumb.offsetWidth;
      if (newLeft > rightEdge) {
        newLeft = rightEdge;
      }
      thumb.style.left = newLeft + 'px';
    }
  }
}


thumb.ondragstart = function() {
  return false;
}

Как сделать чтобы он не реагировал на движение мыши на нём после того как кнопка была отпущена?

codepen

Answer 1

Перетаскивание бегунка состоит из трех событий.

pointerdown нажали кнопку
pointermove перетащили курсор
pointerup отпустили кнопку

Вы назначили первые два, а про pointerup забыли. См. пример ниже.

let thumb = slider.querySelector('.thumb');

//обработчик нажатия
const startHandler = (event) => {
    console.log('start')
    
    //назначаем на элемент обработчик перетаскивания мыши
    event.target.onpointermove = moveHandler; 
    event.target.setPointerCapture(event.pointerId);
}

//обработчик отпуска мышки
const stopHandler = (event) => {
  console.log('end')
  //Когда кнопку отпускаем, убираем обработчик движения мыши.
  event.target.onpointermove = null;
  event.target.releasePointerCapture(event.pointerId);
}


//обработчик перетаскивания 
const moveHandler = (event) => {

  let shiftX = event.clientX - thumb.getBoundingClientRect().left;

  let newLeft = event.clientX - slider.getBoundingClientRect().left;
  if (newLeft < 0) {
    newLeft = 0;
  }

  let rightEdge = slider.offsetWidth - thumb.offsetWidth;
  if (newLeft > rightEdge) {
    newLeft = rightEdge;
  }
  thumb.style.left = newLeft + 'px';
}


//назначаем обработчики на соответствующие события
thumb.onpointerdown = startHandler;
thumb.onpointerup = stopHandler;


/* лишнее, div имеет по умолчанию draggable false 
thumb.ondragstart = function() {
  return false;
}*/

.slider {
  border-radius: 5px;
  background: #E0E0E0;
  background: linear-gradient(left top, #221212, #EEEEEE);
  width: 310px;
  height: 14px;
  margin: 5px;
}

.thumb {
  width: 12px;
  height: 20px;
  border-radius: 4px;
  position: relative;
  left: 10px;
  top: -3px;
  background: rgb(34, 155, 18);
  cursor: pointer;
}

<div id="slider" class="slider">
  <div class="thumb"></div>
</div>

БЛОГ НА HUSL

Почему бегунок движется при наведении на него указателя мыши, после того как кнопка была отпущена?

Ответы (1 шт):