Question

我有一些像圈子和放大器的元素。用raphaeljs创建的画布上的路径。我只想在用户点击画布的空白区域时单击处理。

我尝试在raphael上的canvas / svg elemnt上设置click事件，但是当我在空白区域点击时，我只想点火。

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);

在画布点击功能中，您可以检查elementClicked标志是真还是假并重置。

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

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

Answer 2

类似于罗德里戈的另一个解决方案就是检查事件目标，并检查其类型，ID或其他......

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

拉斐尔 - 如何处理点击空白区域？

2 个答案: