Onclick event for rect using Raphaeljs

Question

I am trying to draw a simple Rectangle with some text on it. Since a shape cannot have text on it, I am creating a set with the same coordinates for the text and the rect objects. I need to change something on onclick event. Hence, I have used the obj.node.onclick = statement and written a handler. My problem is that if the text object is used for onclick the event handler gets called only if i click on the text. If I use the rect for onclick I must click on the border area only. My requirement is that the click can come on the entire area of the shape along with the text in it.

   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");}; 

I have tried to use a div to overlay on the rect and write text on it but no success. I can see the div in firebug but not on the webpage! I have given it style properties for top left width and height as well as stated the position as absolute. But no success.

Please help me with this. Any help is appreciated! Kavita

I tried using the frontlayer backlayer solution. I cloned the backlayer and added a click handler to it. I did not use 'this' at all. The event never got fired! Please help me with this! Kavita

Answer 1

Create a set for all elements in the button. Then add a click (or mouseup) handler to the group. Note that rects must have a fill, otherwise they don't get mouse events. For a transparent button use opacity 0.

var paper = Raphael(10, 10, 320, 200);
var group = paper.set();
var COLOR_NORMAL = 'blue';
var COLOR_HOVER = 'red';
var background = paper.rect(10, 10, 50, 50,10).attr({
    fill: COLOR_NORMAL
});
var label = paper.text(35, 35, "Hello");

group.push(background);
group.push(label);

group.attr({
    cursor: 'pointer',
}).mouseover(function(e) {
    background.attr('fill', COLOR_HOVER);
}).mouseout(function(e) {
    background.attr('fill', COLOR_NORMAL);
}).mouseup(function(e) {
    alert("clicked");
}); 

Answer 2

Here are two ways to do this. In both of them, I'm just adding an onclick for the text. In other words, have the same onclick for the rectangle and for the text.

1) Just add this line at the end

group[group.length - 1].node.onclick = function () { c2.attr("fill", "red");};

2) Or, you could create another variable c3, like c2, and attach the onclick the same way. Here's how all of your code would look.

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);
var c3 = paper.text(35, 35, "Hello").attr({"font-size":36});
group.push(c2);
group.push(c3);

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

I made the text really large here so you could be sure you're clicking on the text and not the rectangle.