javascript - Touchmove event listener animation speeds up each time it is used

Question

I have a very simple slider and I use the touchmove event listener on it. The thing is, I have to reload (changing the slides) this slider several times on the same page, and each time I do it, the slider animation speeds up.

Here is my javascript code :

sliderItems = document.getElementById('slides');

function slide(items) {

    items.addEventListener('touchmove', dragAction);

    function dragAction (e) {
        e = e || window.event;

        // We want here the slides to follow the finger speed
        if (e.type == 'touchmove') {
            posX2 = posX1 - e.touches[0].clientX;
            posX1 = e.touches[0].clientX;
        } else {
            posX2 = posX1 - e.clientX;
            posX1 = e.clientX;
        }
        items.style.left = (items.offsetLeft - posX2) + "px";
    }
}
slide(sliderItems);

And the HTML side :

<div id="mobile-map-toasts-container" class="mobile-map-toasts-container">
    <div id="slides" class="slides">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>
</div>

Each time I use this slide() function, the touch drag animation is faster. On the first time, it works as expected.

Answer 1

等待大神答复