Raphael

Question

我的 canvas 上有一些用 raphaeljs 创建的元素，例如圆圈和路径。当用户单击 canvas.

的空白区域时，我只想处理单击

我尝试在 raphael 中的 canvas/svg 元素上设置点击事件，但它到处都是火，我只想在空白区域点击时火。

var r = Raphael('testGraph', 500, 500);
r.circle(200,200,100).attr({"fill":"#0F0"});
r.path("M100,100L200, 200").attr({
    stroke: "#F00",
    fill: "none",
    "stroke-width": 3
});
r.canvas.onclick = function(){alert("filled & empty area clicked togethere")};

Answer 1

我建议您实现一个标志，该标志会在单击元素时设置 true。它可能看起来像这样：

var elementClickFunction = function() {elementClicked = true;};
circle.click(elementClickFunction);

在 canvas click 函数中检查 elementClicked 标志是真还是假并重置它。

r.canvas.onclick = function(){
    if(elementClicked) {
        alert('element clicked!');
        elementClicked = false;
    }
    else {
        alert('whitespace clicked!');
    }
};

这是一个实际的例子： http://jsfiddle.net/vpGyL/1392/

Answer 2

与 Rodrigo 类似的另一个解决方案是检查事件目标，并检查其类型或 ID 或其他...

r.canvas.onclick = function( ev ){
   if( ev.target.localName == 'svg' ) {
        alert('svg');
   };
};

Raphael - 如何处理空白区域的点击？

Raphael - How to handle click on empty area?