Raphael lienzo (fondo) onclick evento

Question

He estado trabajando con Raphael para crear formas de arrastrar y soltar en un lienzo. Lo hago usando la función .drag() (suministrada en el framework de Raphael) junto con mis funciones de eventos. No tengo problemas para hacer esto.

También tengo una función que crea una nueva forma en DblClick, el problema es que solo puedo adjuntar el evento a una forma u otros elementos que creo.

añadir eventos a una forma funciona de esta manera:

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

Usando el mismo principio en el lienzo no funciona:

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

¿Alguien sabe de una manera de unir eventos de clic al lienzo, es decir, puedo hacer clic en cualquier parte del div (sin incluir las formas) y el evento se activará.

Gracias.

Answer 1

Me gustaría adjuntar el evento de clic normal (con vainilla javascript, o el marco de trabajo js que esté utilizando) al nodo de lienzo (o el nodo principal que contiene el elemento #canvas).

con jQuery:

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

De lo contrario, si está muerto fijado en el uso de eventos Raphael, podría dibujar un rectángulo sobre todo el lienzo, y los eventos de captura Haga clic en eso. pero parece mucho sobrecargado

Answer 2

Como la respuesta aceptada no funcionaba para mí (aunque sí me en el camino correcto) pensé que iba a publicar cómo lo resolví en caso de que haya alguien más en mi posición ...

//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

solución de musefans con compatibilidad de IE. Gracias

//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") 

},