Рафаэль холст (фон) onclick событие

Я работаю с Рафаэлем, чтобы создать фигуры перетаскивания на холсте. Я делаю это, используя функцию .drag() (представленную в рафаэле Рафаэля) вместе с моими функциями события. У меня нет проблем с этим.

У меня также есть функция, которая создает новую форму onDblClick, проблема в том, что я могу прикрепить событие к фигурам или другим элементам, которые я создаю.

Добавление событий в форму работает так:

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

Используя тот же принцип на холсте не работает:

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

Кто-нибудь знает способ прикрепления событий кликов к холсту, т.е. я могу щелкнуть в любом месте div (исключая фигуры), и событие будет запущено.

Спасибо.

Ответы

Ответ 1

Я бы просто привязал регулярное событие click (с помощью javascript vanilla или любого используемого js-фреймворка) к холсту node (или родительскому node, который содержит элемент #canvas).

С jquery:

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

В противном случае, если вы настроены на использование событий Рафаэля, вы можете нарисовать прямоугольник по всему холсту и зафиксировать на нем события щелчка. но это кажется большим количеством накладных расходов.

Ответ 2

Поскольку принятый ответ не сработал у меня (хотя он и сделал меня на правильном пути), я думал, что опубликую, как я его решил, если в моей должности есть кто-то еще...

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

Ответ 3

решение musefans с совместимостью с IE. Благодаря

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

},