如何在 mouseup 上停止 moveright 并允许 moveback 从当前位置开始？

Question

// set up array to contain custom classes of each block element
let blockClsList = [];
// custom block classes pushed into blockClsList array
for (let i = 0; i < document.getElementsByClassName('blocks') 
    [0].children.length; i++) {
    blockClsList.push(document.getElementsByClassName('blocks') 
    [0].children[i].classList[1]);
};

// ======================  Travelers  =========================

const moveRight = (event) => {
    let marginPX = 10;

这里我给动画设置了Interval。我已经阅读了 MDN 文档，但我仍然不确定我是否在正确的元素上设置了它。我需要将 setInterval 附加到方框 class 吗？

    window.setInterval(function () {
    // when margin is smaller than 300
        if (marginPX < 300) {
            marginPX++;
            event.target.style.marginLeft = marginPX + 'px';
        }
    }, 5);
};

// sets event listeners for mousedown on all blocks
for (let i = 0; i < blockClsList.length; i++) {
    document.querySelector('.' + 
    blockClsList[i]).addEventListener('mousedown', moveRight);
};

const moveBack = (event) => {

这是我清除间隔以在当前位置开始 moveBack 但这是行不通的。两个动画尝试同时执行。

我应该使用开始动画和停止动画吗？如果是这样，那会是什么样子。我也尝试移动 clearInterval，但没有成功。

    window.clearInterval(moveRight);
    let marginPX = 300;
    window.setInterval(function () {
        if (marginPX > 10) {
            marginPX--;
            event.target.style.marginLeft = marginPX + 'px';
        }
    }, 5);
};

// sets event listeners for mouseup on all blocks
for (let i = 0; i < blockClsList.length; i++) {
    document.querySelector('.' + 
    blockClsList[i]).addEventListener('mouseup', moveBack);
};

Answer 1

body {
  display: flex;
  /*justify-content: center;*/
}

.blocks {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
}

.block {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.block--red {
  background-color: red;
}

.block--blue {
  background-color: blue;
}

.block--green {
  background-color: green;
}

.block--pink {
  background-color: pink;
}

.block--gray {
  background-color: gray;
}

<html>

<head>
  <title>DOM II</title>
</head>

<body>
  <div class="blocks">
    <div class="block block--red"></div>
    <div class="block block--blue"></div>
    <div class="block block--green"></div>
    <div class="block block--pink"></div>
    <div class="block block--gray"></div>
  </div>
  <script>
    // set up array to contain custom classes of each block element
    let blockClsList = [];
    // custom block classes pushed into blockClsList array
    for (let i = 0; i < document.getElementsByClassName('blocks') 
[0].children.length; i++) {
      blockClsList.push(document.getElementsByClassName('blocks')[0].children[i].classList[1]);
    };

    // ==================  Travelers  ======================
    let marginPX = {};
    let inter = {};

    const moveRight = (event) => {
      
window.clearInterval(inter[`${event.target.attributes[0].nodeValue}`]);
      inter[`${event.target.attributes[0].nodeValue}`] = setInterval(function() {
        // when margin is smaller than 300
        if (marginPX[`${event.target.attributes[0].nodeValue}`] === undefined) {
          marginPX[`${event.target.attributes[0].nodeValue}`] = 10;
        }
        if (marginPX[`${event.target.attributes[0].nodeValue}`] < 300) {
          marginPX[`${event.target.attributes[0].nodeValue}`]++;
          event.target.style.marginLeft = marginPX[`${event.target.attributes[0].nodeValue}`] + 'px';
        }
      }, 5);
    }

    // sets event listeners for mousedown on all blocks
    for (let i = 0; i < blockClsList.length; i++) {
      document.querySelector('.' + blockClsList[i]).addEventListener('mousedown', moveRight);
    }

    const moveBack = (event) => {
      window.clearInterval(inter[`${event.target.attributes[0].nodeValue}`]);
      inter[`${event.target.attributes[0].nodeValue}`] = setInterval(function() {
        clearInterval(moveRight);
        if (marginPX[`${event.target.attributes[0].nodeValue}`] > 10) {
          marginPX[`${event.target.attributes[0].nodeValue}`]--;
          event.target.style.marginLeft = marginPX[`${event.target.attributes[0].nodeValue}`] + 'px';
        }
      }, 5);
    }

    // sets event listeners for mouseup on all blocks
    for (let i = 0; i < blockClsList.length; i++) {
      document.querySelector('.' + blockClsList[i]).addEventListener('mouseup', moveBack);
    }
  </script>
</body>

</html>

如何在 mouseup 上停止 moveright 并允许 moveback 从当前位置开始？

How do I stop moveright on mouseup and allow moveback to start at current location?

javascript

animation

setinterval

addeventlistener

clearinterval