Question

I have been working with Raphael to create drag and drop shapes on a canvas. I do this using the .drag() function (supplied in the Raphael framework) along with my event functions. I have no issues doing this.

I also have a function that creates a new shape onDblClick, the problem is, I can only attach the event to a shapes, or other elements I create.

Adding events to a shape works like so:

  R = Raphael("canvas", "100%", "100%"),
  R.rect(100, 100, 25, 50).attr({fill: fillColor}).dblclick(myDblClick);

Using the same principle on the canvas doesn’t work:

  R = Raphael("canvas", "100%", "100%"),
  R.dblclick(myDblClick);

Does anybody know a way to attach click events to the canvas, i.e. I can click anywhere in the div (excluding shapes) and the event will be triggered.

Answer 1

I would just attach the regular click event (with vanilla javascript, or whatever js framework you are using) to the the canvas node (or the parent node that contains the #canvas element).

With jquery:

//Bound to canvas
$('#canvas').bind('dblclick', myDblClick);
//Bound to parent
$('#canvas').parent().bind('dblclick', myDblClick);

Otherwise, if you are dead-set on using Raphael events, you could draw a rectangle over the entire canvas, and capture click events on that. but that seems like a lot of overhead.