鼠标向上时取消功能

Cancel function on mouse up?

本文关键字：取消 功能 鼠标      更新时间：2023-09-26

我想知道如何在鼠标上移事件时取消/停止函数？

我基本上有一个onmousedown和一个mousemove，这让我找到了一种用鼠标计算偏移量的方法，但如果我用mouseup，它仍然会跟着鼠标！

我使用：

function mousePos(e){  //gets the mouse position on click "start position"
    mousex = e.pageX;
    mousey = e.pageY;
canvas.addEventListener("mousemove", movePos, false);
}
function movePos(e){ // works out how far the mouse has moved from start position
    offset_x = mousex - e.pageX;
    offset_y = mousey - e.pageY;
}
//this is in my init function for body onload
canvas.addEventListener("mousedown", mousePos, false);

我的问题是，一旦按钮不再按下，我需要它停止运行。

为mouseup添加一个事件侦听器，然后删除mousemove的事件侦听器。

鼠标上移：

 canvas.addEventListener('mouseup',onMouseUp,false);

然后在鼠标上删除：

function onMouseUp(e) {
    canvas.removeEventListener('mousemove',movePos,false)
}

添加mouseup侦听器：

 canvas.addEventListener('mouseup', mouseFin, false);

然后在mouseup侦听器中，删除mousemove侦听器：

function mouseFin(e) {
    canvas.removeEventListener('mousemove', movePos, false)
}

演示：jsfidd.net/dATCA

相关文章：