鼠標取消功能？

Question

我想知道如何取消/停止鼠標事件的功能？

我基本上有一個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); 

我的問題是我需要它停止運行，一旦按鈕不再壓制。

Answer 1

添加mouseup聽衆：

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

然後在mouseup監聽器，刪除mousemove聽衆：

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

演示：jsfiddle.net/dATCA

Answer 2

爲mouseup添加事件偵聽器，並在那裏刪除mousemove的事件偵聽器。

鼠標鬆開：

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

，然後onMouseUp刪除：

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