Question

Why does this event handler in RaphaelJS (2.0.0) run straight away and not when you click on it?

function enlarge (shape) {
  shape.animate({'transform' : 's2'}, 200);
}

jQuery(function () {
  var paper = Raphael("canvas", 1000, 1000);
  var button = paper.circle(300, 50, 20);
  button.attr({'fill':'black'});

  var circle = paper.circle(50, 50, 20);
  circle.attr({'fill':'red'});

  button.mousedown(enlarge(circle));
});  

Answer 1

.mousedown() expects a function reference as its argument. Instead, you are calling a function, and all .mousedown() gets as its parameter is undefined. Since you need to pass circle to enlarge() you can’t pass a reference to enlarge directly. Instead, wrap your call to enlarge() in a function:

button.mousedown(function () {
    enlarge(circle);
});