Question

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

任何人都知道如何防止点击通过矩形？

非常感谢！

以下是我创建rect和on click方法的方法：

// 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元素。该库不包含画布本身的单击事件处理程序。因此我必须修改jquery click事件函数，以检查节点名称。

$( 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 rect禁用点击

1 个答案: