Jquery / RaphaelJS SVG rect disable click through

Question

I use RaphaelJS to draw some rects. I want that each rect is selectable. So i added a on click function, that will fill the selected rect with other color and add it to an array. I want to deselect every selected rect. For this I added an on click function for the paper, on which they are drawn. The problem no is, that everytime i click on a rect, it first calls the on click function for the rect and after that it calls the function for the paper. So it will instantly deslect the rect again. I think the problem is, that the click on the rect goes through the rect.

Anyone got an idea how to prevent the click to go through the rect ?

Thanks a lot!

Here is how i create the rect and the 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 to 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",
        });
    })
});

Answer 1

I found out that the raphael js library had their own click events. But they were only available for svg elements like rect and eclipse. The library doesn't include an click event handler for the canvas itself. Therefore i had to modify the jquery click event functions, to check the node name.

$( document ).on( "click", ".drawedRect", function() {
     if (e.target.nodeName == "rect"){
         console.log("Add to 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",
            });
        })
    }
});