Using addEventListener to add a callback with arguments

Question

I'm creating a drag and drop system using a canvas.

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

When I click, I need to store the values for the initial mouse position and the initial ball position, so I can correctly drag the ball around.

The above code works perfectly, but I think it looks messy with all the global variables. I'd like onMouseMove to be able to accept the parameters initialClickX, initialClickY, initialBallX and initialBallY. But how can I add these parameters to the callback function?

Or if there is a better way to do this please let me know, thanks.

I didn't really think about it, but couldn't you create an object or instance and store properties of it? — Jeff Noel
– Jeff Noel, Commented Jun 21, 2013 at 15:02

Mathias Lykkegaard Lorenzen · Accepted Answer · 2013-06-21 15:14:07Z

8

Try using a wrapper function to do it.

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

edited Jun 21, 2013 at 15:14

answered Jun 21, 2013 at 15:07

Mathias Lykkegaard Lorenzen

16.1k28 gold badges110 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mathias Lykkegaard Lorenzen Over a year ago

My first solution didn't handle initialBallX and initialBallY properly. This one does. No global variables. Just pure awesome.

Muaaz Khalid Over a year ago

what if we are in a class that attach the event with a callback function and few parameters, does that function would be declared outside the class? that's annoying.

Alberto Zaccagni · Accepted Answer · 2013-06-21 15:02:12Z

4

Here is a small example of how you could do that without using global variables:

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

function caller(funx) {
  funx();
}

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

Basically you are setting onto called a set of predefined parameters, in this case 'a' and 'b'.

So in your case it is something like:

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

answered Jun 21, 2013 at 15:02

Alberto Zaccagni

31.8k11 gold badges75 silver badges108 bronze badges

Comments

Marvin Emil Brach · Accepted Answer · 2013-06-21 15:01:50Z

3

Use a wrapping function stub which sets the parameters:

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

answered Jun 21, 2013 at 15:01

Marvin Emil Brach

3,9901 gold badge34 silver badges62 bronze badges

Collectives™ on Stack Overflow

Using addEventListener to add a callback with arguments

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related