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

在公共范围内使用标志。在 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 3

停止鼠标移动很简单，只需调用slide.removeEventListener("mousemove", "function you're calling under mousemove"); 只需将其调用到您要停止的方法中即可

Answer 4

为什么不仅仅删除事件监听器？

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

鼠标悬停后如何停止“ mousemove”事件？

4 个答案: