Jquery / RaphaelJS SVG rect 禁用点击

Posted 2023-03-28

【中文标题】Jquery / RaphaelJS SVG rect 禁用点击

【英文标题】：Jquery / RaphaelJS SVG rect disable click through

【发布时间】：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。

【参考方案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",
            );
        )
    
);