使用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(); 
} 

問題是，當我mouseup時，我不能讓球停止拖動。我知道，我需要添加：

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