Raphael canvas (background) onclick event
As the accepted answer didn't work for me (though it did get me on the right track) I thought I would post how I solved it in case there is anybody else in my position...
//Create paper element from canvas DIVvar canvas = $("#Canvas");paper = Raphael("Canvas", canvas.width(), canvas.height());//Register Event$("#Canvas").click(CanvasClick);//Event Handlerfunction CanvasClick(e) { if (e.target.nodeName == "svg") { //This will only occur if the actual canvas area is clicked, not any other drawn elements }}
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.
musefans solution with IE compatiblity. Thanks
//Create paper element from canvas DIVvar canvas = $("#Canvas");paper = Raphael("Canvas", canvas.width(), canvas.height());$("#canvas").click(canvasClick);canvasClick: function(e) { if (e.target.nodeName == "svg" || e.target.nodeName == "DIV" )},