如何在鼠標抬起后停止“mousemove”事件？

Question

我想在mousedown事件和mousemove上創建滑動幻燈片，但在mouseup上我想停止mousemove事件。

slide.addEventListener("mousedown", e => {
  console.log(e.clientX);
});

slide.addEventListener("mousemove", function move(e) {
  //  do Somthing
});

slide.addEventListener("mouseup", function stop(e) {
  //  stop the mousemove event
});

Answer 1

在需要時嘗試添加和刪除偵聽器：

function move(e) {
  //  do Somthing
}

slide.addEventListener("mousedown", e => {
  console.log(e.clientX);
  slide.addEventListener("mousemove", move);
});

slide.addEventListener("mouseup", function stop(e) {
  slide.removeEventListener("mousemove", move);
});

Answer 2

停止 mousemove 很簡單，只需調用slide.removeEventListener("mousemove", "function you're calling under mousemove"); 只需將它調用到你想要停止它的方法中

Answer 3

在公共范圍內使用標志。 在mousedown中將其設置為true ，在mouseup中將其設置為false 。 在mousemove中查看

var pressing = false;

slide.addEventListener("mousedown", e => {
  pressing = true;
});

slide.addEventListener("mousemove", function move(e) {
  if (pressing) {
    // do something only if mouse button is being pressed
  }
});

slide.addEventListener("mouseup", function stop(e) {
  pressing = false;
});

Answer 4

為什么不直接刪除事件偵聽器？

slide.addEventListener("mouseup", function stop(e) {
  slide.removeEventListener("mousemove", function move(e) {});
});