Raphael canvas (background) onclick event

Question

Ho lavorato con Raphael per creare forme drag and drop su una tela. Lo faccio usando la funzione .drag() (fornita nel framework Raphael) insieme alle mie funzioni di evento. Non ho problemi a farlo.

Ho anche una funzione che crea una nuova forma su DblClick, il problema è che posso solo associare l'evento a forme o altri elementi che creo.

Aggiunta di eventi a una forma funziona in questo modo:

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

Utilizzando lo stesso principio su tela non funziona:

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

Qualcuno sa un modo per collegare cliccare eventi alla tela, cioè posso cliccare ovunque nel div (escluse le forme) e l'evento verrà attivato.

Grazie.

Answer 1

Vorrei semplicemente allegare l'evento di clic regolare (con vanilla javascript o qualsiasi altro framework js in uso) al nodo canvas (o al nodo padre che contiene l'elemento #canvas).

con jQuery:

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

In caso contrario, se sei morto-set sull'utilizzo di eventi di Raffaello, si potrebbe disegnare un rettangolo su tutta la tela, e gli eventi di cattura clic su questo. ma sembra un sacco di spese generali.

Answer 2

come la risposta accettata non ha funzionato per me (anche se ha fatto diventare me sulla strada giusta) ho pensato di postare come ho risolto nel caso in cui non v'è nessun altro al mio posto ...

//Create paper element from canvas DIV 
var canvas = $("#Canvas"); 
paper = Raphael("Canvas", canvas.width(), canvas.height()); 

//Register Event 
$("#Canvas").click(CanvasClick); 

//Event Handler 
function CanvasClick(e) { 
    if (e.target.nodeName == "svg") 
    { 
     //This will only occur if the actual canvas area is clicked, not any other drawn elements 
    } 
} 

Answer 3

soluzione musefans con compatibilità IE. Grazie

//Create paper element from canvas DIV 
var canvas = $("#Canvas"); 
paper = Raphael("Canvas", canvas.width(), canvas.height()); 

$("#canvas").click(canvasClick); 

canvasClick: function(e) { 
    if (e.target.nodeName == "svg" || e.target.nodeName == "DIV") 

},