Почему событие 'mouseup' срабатывает все большее количество раз?

Question

У меня есть код, который делает просто dragg and dropp. В момент отпускания элемента, должна вызываться функция. Все вроде работает, но при повторении отпускания элемента эта функция срабатывает +1 раз. В примере это функция вывода в консоль test. Подскажите разобраться почему так происходит?

let pin = document.querySelector('.pin'); 

pin.addEventListener('mousedown', function (evt) {
        evt.preventDefault();

        var startCoord = {
            x: evt.clientX,
            y: evt.clientY
        };
        var dragged = false;

        var onMouseMove = function (evtMove) {
            evtMove.preventDefault();
            dragged = true;
    
            var newCoord = {
                x: startCoord.x - evtMove.clientX,
                y: startCoord.y - evtMove.clientY
            };
    
            startCoord = {
                x: evtMove.clientX,
                y: evtMove.clientY
            };
    
            pin.style.left = (pin.offsetLeft - newCoord.x) + 'px';
            pin.style.top = (pin.offsetTop - newCoord.y) + 'px';
        } 

        document.addEventListener('mousemove', onMouseMove);

        pin.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', onMouseMove);
            console.log('test');
        });
    });

body {
  position: relative;
}
.pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: red;
  cursor: pointer;
}

<div class="pin"></div>

БЛОГ НА HUSL

Почему событие 'mouseup' срабатывает все большее количество раз?

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