Удаление обратного вызова функции-обертки с removeEventListener

Question

У меня есть этот код, который перетаскивает мяч вокруг холста при щелчке и перетаскивании.

canvas.addEventListener('mousedown', function() { 
    var initialClickX = mouse.x; 
    var initialClickY = mouse.y; 
    var initialBallX = ball.x; 
    var initialBallY = ball.y; 

    canvas.addEventListener('mousemove', function() { 
     onMouseMove(initialClickX, initialClickY, mouse.x, mouse.y, initialBallX, initialBallY) 
    }, false); 

}, false); 

function onMouseMove(initialClickX, initialClickY, mouseX, mouseY, initialBallX,  initialBallY){ 
    ball.x = mouseX + initialBallX - initialClickX; 
    ball.y = mouseY + initialBallY - initialClickY; 
    draw(); 
} 

Проблема в том, что я не могу заставить мяч прекратить перетаскивание, когда я нажимаю. Я знаю, что мне нужно добавить:

canvas.removeEventListener('mousemove', function() { 
     onMouseMove(initialClickX, initialClickY, mouse.x, mouse.y, initialBallX, initialBallY) 
    }, false); 

Но так как функция находится в обертке выше не имеет никакого эффекта, и мяч застревает в мой курсор. Может ли кто-нибудь предложить способ обойти это?

Answer 1

Не используйте анонимную функцию. Вам необходимо сохранить ссылку на функцию прослушивателя событий для последующего удаления.

canvas.addEventListener('mousedown', function() { 
    var initialClickX = mouse.x; 
    var initialClickY = mouse.y; 
    var initialBallX = ball.x; 
    var initialBallY = ball.y; 

    function wrapper() { 
     onMouseMove(initialClickX, initialClickY, mouse.x, mouse.y, initialBallX, initialBallY) 
    } 

    canvas.addEventListener('mousemove', wrapper, false); 

    // some time later 
    canvas.removeEventListener('mousemove', wrapper); 

}, false);