title: Onclick event for rect using Raphaeljs
body: <p>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.</p>
  
  <pre><code>   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");}; 
  </code></pre>
  
  <p>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.</p>
  
  <p>Please help me with this.
  Any help is appreciated!
  Kavita</p>
  
  <p>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</p>