Raphael canvas (background) onclick event Raphael canvas (background) onclick event jquery jquery

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" )},