Javascript 使用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('mousemove', function() {onMouseMove(window.initialBallX, window.initialBallY, window.initialClickX, window.initialClickY); });

---

使用包装函数存根设置参数：

canvas.addEventListener('mousemove', function() {onMouseMove(window.initialBallX, window.initialBallY, window.initialClickX, window.initialClickY); });

---

下面是一个不使用全局变量的小示例：

function called() {
  console.log(arguments);
}

function caller(funx) {
  funx();
}

caller(called.bind(this, 'a', 'b'));

基本上，您正在设置一组预定义的参数，称为

，在本例中是
'a'
和
'b'

因此，在您的情况下，它类似于：

canvas.addEventListener('mousedown', function () {
  canvas.addEventListener('mousemove', 
    onMouseMovebind(this, mouse.x, mouse.y, ball.x, ball.y), false);
}, false);

下面是一个不使用全局变量的小示例：

function called() {
  console.log(arguments);
}

function caller(funx) {
  funx();
}

caller(called.bind(this, 'a', 'b'));

基本上，您正在设置一组预定义的参数，称为
，在本例中是
'a'
和
'b'

因此，在您的情况下，它类似于：

canvas.addEventListener('mousedown', function () {
  canvas.addEventListener('mousemove', 
    onMouseMovebind(this, mouse.x, mouse.y, ball.x, ball.y), false);
}, false);

尝试使用包装器函数来完成此操作

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

我真的没有想过，但是你不能创建一个对象或实例并存储它的属性吗？我真的没有想过，但是你不能创建一个对象或实例并存储它的属性吗？我的第一个解决方案没有正确处理
initialBallX
和
initialBallY
。这个有。没有全局变量。如果我们在一个附加了回调函数和很少参数的事件的类中，该函数会在类之外声明吗？这很烦人。我的第一个解决方案没有正确处理
initialBallX
和
initialBallY
。这个有。没有全局变量。如果我们在一个附加了回调函数和很少参数的事件的类中，该函数会在类之外声明吗？真烦人。