Jquery / RaphaelJS SVG 矩形禁用点击

Question

我用 RaphaelJS 画了一些矩形。我希望每个矩形都是可选的。所以我添加了一个点击功能，它将用其他颜色填充选定的矩形并将其添加到数组中。我想取消选择每个选定的矩形。为此，我为绘制它们的纸张添加了点击功能。问题不在于，每次我点击一个矩形时，它首先调用矩形的点击函数，然后调用纸张的函数。所以它会立即再次删除矩形。我认为问题在于，点击矩形会穿过矩形。

有人知道如何防止点击通过矩形吗？

非常感谢！

这是我创建矩形和点击方法的方法：

// 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

我发现 raphael js 库有自己的点击事件。但它们只适用于像 rect 和 eclipse 这样的 svg 元素。该库不包含 canvas 本身的点击事件处理程序。因此，我不得不修改 jquery 单击事件函数，以检查节点名称。

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

Jquery / RaphaelJS SVG 矩形禁用点击

Jquery / RaphaelJS SVG rect disable click through

jquery

svg

raphael

rect