使用addEventListener添加鼠标移动事件，在鼠标mouseup时清除移动事件

可以使用以下代码实现：

function handleMouseMove(event) {
  // 处理鼠标移动事件
}

function handleMouseUp(event) {
  // 清除鼠标移动事件
  document.removeEventListener('mousemove', handleMouseMove);
}

document.addEventListener('mousedown', function(event) {
  // 添加鼠标移动事件
  document.addEventListener('mousemove', handleMouseMove);
});

document.addEventListener('mouseup', handleMouseUp);

首先，我们定义了两个函数`handleMouseMove`和`handleMouseUp`，分别用于处理鼠标移动事件和鼠标抬起事件。

然后，我们在文档对象上添加了一个mousedown事件监听器，当鼠标按下时，我们添加了一个mousemove事件监听器，并传入`handleMouseMove`函数作为处理函数。

最后，我们在文档对象上添加了一个mouseup事件监听器，当鼠标抬起时，我们调用`handleMouseUp`函数来移除mousemove事件监听器，从而清除鼠标移动事件。

相关问题

使用addEventListener添加鼠标移动事件，在鼠标mouseup时清除移动事件，且能拿到移动后的event

可以通过以下代码实现：

let mouseMoveHandler = function(event) {
  // 处理鼠标移动事件
};

let mouseUpHandler = function(event) {
  // 清除鼠标移动事件
  document.removeEventListener('mousemove', mouseMoveHandler);
  document.removeEventListener('mouseup', mouseUpHandler);

  // 处理鼠标抬起事件
  console.log(event);
};

document.addEventListener('mousedown', function(event) {
  // 添加鼠标移动事件
  document.addEventListener('mousemove', mouseMoveHandler);

  // 添加鼠标抬起事件
  document.addEventListener('mouseup', mouseUpHandler);
});

在上面的代码中，我们首先定义了一个`mouseMoveHandler`函数和一个`mouseUpHandler`函数分别处理鼠标移动和抬起事件。在`mousedown`事件中，我们添加了鼠标移动事件和鼠标抬起事件的监听器。当鼠标抬起时，我们先移除鼠标移动事件和鼠标抬起事件的监听器，然后处理鼠标抬起事件，同时获取到了`event`对象。

在vue中使用addEventListener添加鼠标移动事件，在鼠标在鼠标mouseup时清除移动事件，且能拿到移动后的event

可以尝试以下代码：

<template>
  <div ref="box" @mousedown="handleMouseDown" @mouseup="handleMouseUp"></div>
</template>

<script>
export default {
  methods: {
    handleMouseDown() {
      this.$refs.box.addEventListener('mousemove', this.handleMouseMove)
    },
    handleMouseMove(event) {
      // 在移动时做一些操作
    },
    handleMouseUp(event) {
      this.$refs.box.removeEventListener('mousemove', this.handleMouseMove)
      // 在鼠标抬起时做一些操作，event也可以拿到
    }
  }
}
</script>

在鼠标按下时添加鼠标移动事件，在鼠标抬起时清除鼠标移动事件，并且可以拿到移动后的event对象。注意要使用`removeEventListener`来清除事件监听，否则会导致内存泄漏。