Onclick event for rect using Raphaeljs

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

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.

It's nice to actually provide a 3 layer object because you can colour the back-layer how you like. The front layer is the same shape as your back layer but it has an opacity of zero so that you can see the text on the middle layer.I also don't like to use node for handling events but the natively available Raphael event handling mechanism.The below example is taken from one of the examples on my website, I have cut it down even further so it's more readily understood.Also note it is a button made up of a front and back layer circle with a text sandwiched between the two layers. They could just as easily be rectangles/rounded rectangles.The functionality includes the colours inverting on mouseover/mouseout...

button = function (paper, xpos, ypos, r, labeltext) {this.backLayer = paper.circle(xpos, ypos, r).attr({ fill: "#FFFF00", 'fill-opacity': 0  , stroke: "#FF0000",'stroke-width':5, 'stroke-opacity':0});/*The text automatically centres itself as this is the default text positioning for Raphael text*/this.label = paper.text(xpos, ypos, labeltext).attr({fill:'#ff0000', 'font-size':18});/*Now we make a copy for the front layer and we also make the back layer opaque. So that you can see it's yellow fill*/this.frontLayer = this.backLayer.clone();this.backLayer.attr({'fill-opacity': 1, 'stroke-opacity':1});/*Now make the back layer and the text referencable for the mouseover, mouseout and click event of the front layer*/ this.frontLayer.backLayer= this.backLayer;this.frontLayer.label = this.label;/*Add a preferred cursor by referencing the underlying DOM object of the frontLayer*/this.frontLayer.node.style.cursor = 'pointer';/*Now you can interact with the lower layers behind the invisible covering layer ( frontLayer ) in it's event methods*/this.frontLayer.mouseover(function (e) {    this.backLayer.animate({ fill: "#FF0000", stroke: "#FFFF00" }, 1000);    this.label.animate({ fill: "#FFFF00" }, 1000);    });  this.frontLayer.mouseout(function (e) {    this.backLayer.animate({ fill: "#FFFF00", stroke: "#FF0000" }, 1000);    this.label.animate({ fill: "#FF0000" }, 1000);    });this.frontLayer.click(      function (e) {        alert("Creating loads of custom buttons is easy\n\nYou made this one with the following specification:\n"+        "Button Text      : "+this.label.attr("text")+"\n"+        "Button Centre @ X: "+this.backLayer.attr("cx")+"\n"+        "Button Centre @ Y: "+this.backLayer.attr("cy")+"\n"+        "Button Radius    : "+this.backLayer.attr("r"));    });  }/*Create the button*/rappyButton = new button(paper, 250, 200, 75, "Raphael");

Hope that helped.