Question

I am wondering how do i cancel/stop a function upon a mouse up event?

I basically have a onmousedown followed by a mousemove this lets me find a way to work out the offset amount with the mouse, but if i mouseup – it still keeps following the mouse!

I use:

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);

The problem i have is i need it to stop running once the button is no longer pressed.

Answer 1

Add a mouseup listener:

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

Then in the mouseup listener, remove the mousemove listener:

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

Demo: jsfiddle.net/dATCA