Рафаэль холст (фон) 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" )
},