Raphael canvas (background) onclick event

Question

Pracowałem z Raphaelem nad tworzeniem kształtów "przeciągnij i upuść" na płótnie. Robię to za pomocą funkcji .drag() (dostarczanej w ramach Raphaela) wraz z moimi funkcjami zdarzeń. Nie mam żadnych problemów z tym.

Mam również funkcję, która tworzy nowy kształt naDblClick, problem polega na tym, że mogę dołączyć wydarzenie tylko do kształtów lub innych elementów, które tworzę.

Dodawanie wydarzeń do kształtu działa tak:

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

Stosując tę ​​samą zasadę, na płótnie nie działa:

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

Czy ktoś zna sposób, aby dołączyć kliknij wydarzenia do płótna, tzn. mogę kliknąć w dowolnym miejscu w div (bez kształtów), a zdarzenie zostanie uruchomione.

Dzięki.

Answer 1

Po prostu dołączę zwykłe zdarzenie click (z javascriptem wanilii lub jakimkolwiek js frameworkem) do węzła canvas (lub węzła nadrzędnego zawierającego element #canvas).

z jQuery:

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

W przeciwnym razie, jeśli jesteś martwy ustawiony na wykorzystaniu zdarzenia Raphael, można narysować prostokąt na całej płótnie i przechwytywanie kliknięć wydarzeń w tej sprawie. ale to wydaje się dużo narzut.

Answer 2

Jak przyjął odpowiedź nie działa dla mnie (choć nie dostać mnie na właściwe tory) Myślałam, że będę pisać jak ja go rozwiązać w przypadku, gdy istnieje ktoś inny na moim miejscu ...

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

Rozwiązanie musefans z kompatybilnością IE. Dzięki

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

},