Событие Onclick для прямоугольника с использованием Raphaeljs

Я пытаюсь нарисовать простой прямоугольник с текстом. Поскольку на фигуре не может быть текста, я создаю набор с одинаковыми координатами для текста и прямоугольных объектов. Мне нужно что-то изменить в событии onclick. Следовательно, я использовал оператор obj.node.onclick = и написал обработчик. Моя проблема в том, что если текстовый объект используется для onclick, обработчик событий вызывается только в том случае, если я нажимаю на текст. Если я использую прямоугольник для onclick, я должен щелкнуть только по границе. Мое требование состоит в том, чтобы щелчок мог происходить по всей области фигуры вместе с текстом в ней.

   var paper = Raphael(10, 10, 320, 200);
var group = paper.set();
var c1 = paper.path("M35 60 L35 90");
var c2 = paper.rect(10, 10, 50, 50,10);
group.push(c2);
group.push(paper.text(35, 35, "Hello"));

c2.attr("fill", "blue");
c2.node.onclick = function () { c2.attr("fill", "red");}; 

Я пытался использовать div для наложения на прямоугольник и записи текста на нем, но безуспешно. Я вижу div в firebug, но не на веб-странице! Я дал ему свойства стиля для ширины и высоты верхнего левого угла, а также указал положение как абсолютное. Но безуспешно.

Пожалуйста, помогите мне с этим. Любая помощь приветствуется! Kavita

Я пробовал использовать решение frontlayer backlayer. Я клонировал задний слой и добавил к нему обработчик кликов. Я вообще не использовал «это». Событие так и не уволили! Пожалуйста, помогите мне с этим! Kavita