Jquery / RaphaelJS SVG rect 禁用点击答案

【问题标题】：Jquery / RaphaelJS SVG rect disable click throughJquery / RaphaelJS SVG rect 禁用点击
【发布时间】：2017-09-10 22:34:36
【问题描述】：

我使用 RaphaelJS 来绘制一些矩形。我希望每个矩形都是可选的。所以我添加了一个点击功能，它将用其他颜色填充选定的矩形并将其添加到数组中。我想取消选择每个选定的矩形。为此，我为绘制它们的纸张添加了点击功能。问题不是，每次我点击一个矩形时，它首先为矩形调用 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",
        });
    })
});

【问题讨论】：

如果您打算使用 Raphael，我个人会使用 Raphaels 点击处理程序而不是 Jquery。我怀疑问题会消失。否则，请查看 event.preventDefault() 并将其添加到您的点击处理程序中。
我尝试了来自 Raphael 的点击事件，它们奏效了。但是您只能在矩形或椭圆上而不是在“画布”上绑定点击事件......因此我在点击功能上修改了 jquery。

标签： jquery svg raphael rect

【解决方案1】：

我发现 raphael js 库有自己的点击事件。但它们仅适用于 rect 和 eclipse 等 svg 元素。该库不包含画布本身的单击事件处理程序。因此我不得不修改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",
            });
        })
    }
});

【讨论】：