Рафаэль холст (фон) событие onclick - PullRequest
Новая
       6

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

17 голосов
/ 11 ноября 2010

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

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

Добавление событий к фигуре работает следующим образом: 

  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 (исключая фигуры), и событие будет запущено.

Спасибо.

Ответы [ 3 ]

19 голосов
/ 17 октября 2011

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

//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
    }
}
13 голосов
/ 12 ноября 2010

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

С помощью jquery: 

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

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

3 голосов
/ 18 декабря 2011

решение 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" )

},
...