jQuery的/ RaphaelJS SVG RECT禁止通过点击

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

任何人有一个想法如何防止点击要经过矩形？

非常感谢！

这里是我创建正确，而且上点击的方法：

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

来源

2017-04-14 inf3ction

如果您正在使用Raphael，我会亲自使用Raphaels点击处理程序而不是Jquery。我怀疑这个问题将会消失。否则，请查看event.preventDefault（）并将其添加到您的点击处理程序中。 – Ian

我尝试了来自Raphael的点击事件，他们工作。但你只能绑定一个矩形或椭圆上的点击事件，而不是“画布”......因此我修改了点击函数的jQuery。 – inf3ction

我发现拉斐尔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", 
      }); 
     }) 
    } 
});

来源

2017-04-18 08:49:30 inf3ction

jQuery的/ RaphaelJS SVG RECT禁止通过点击

回答

相关问题