Jquery / RaphaelJS SVG rect disable click through -

i use raphaeljs draw rects. want each rect selectable. added on click function, fill selected rect other color , add array. want deselect every selected rect. added on click function paper, on drawn. problem no is, everytime click on rect, first calls on click function rect , after calls function paper. instantly deslect rect again. think problem is, click on rect goes through rect.

anyone got idea how prevent click go through rect ?

thanks lot!

here how create rect , on click methods :

// bild new rectangle var rectelement = paper.rect(x, y, w, h); // add attributes rectelement.attr({         fill: "white",         opacity: 1,         stroke: "#f00",         title: text });    $( document ).on( "click", ".drawedrect", function() {      console.log("add selected");      selectedrects.push(this);      $(this).attr({         fill: "#f39814",      }); });  $( document ).on( "click", "#paper", function() {     console.log("click paper");     selectedrects.foreach(function(entry){         $(entry).attr({             fill: "white",         });     }) }); 

i found out raphael js library had own click events. available svg elements rect , eclipse. library doesn't include click event handler canvas itself. therefore had modify jquery click event functions, check node name.

$( document ).on( "click", ".drawedrect", function() {      if (e.target.nodename == "rect"){          console.log("add selected");          selectedrects.push(this);          $(this).attr({             fill: "#f39814",          });      } });  $( document ).on( "click", "#paper", function() {     if (e.target.nodename == "svg"){         console.log("click paper");         selectedrects.foreach(function(entry){             $(entry).attr({                 fill: "white",             });         })     } });