使用 addEventListener 添加带有参数的回调

我正在使用画布创建拖放系统。

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

     function onMouseMove(){
        ball.x = mouse.x + window.initialBallX - window.initialClickX;
        ball.y = mouse.y + window.initialBallY - window.initialClickY;
        draw();
     }

当我单击时，我需要存储初始鼠标位置和初始球位置的值，以便我可以正确拖动球。

上面的代码工作得很好，但我认为所有全局变量看起来都很混乱。我希望 onMouseMove 能够接受参数initialClickX、initialClickY、initialBallX 和initialBallY。但是如何将这些参数添加到回调函数中呢？

或者如果有更好的方法请告诉我，谢谢。

尝试使用包装函数来做到这一点。

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