Raphael.js新手：如何在鼠标点击“其他地方”时删除元素？

我已经渲染而成的矩形：Raphael.js新手：如何在鼠标点击“其他地方”时删除元素？

var paper = Raphael("notepad", 320, 200); 

var rect = paper.rect(10, 10, 50, 50);

我有实现该功能为：当在矩形鼠标点击，会出现一个圈弹出：

rect .click(function(evt){ 
    var circle=paper.circle(50, 50, 40); 
});

我想实施另一个功能，当鼠标点击“其他地方”时，弹出圈消失r。 “else-其中”意指paper或的任何元件。

但是paper没有点击事件，那我该怎么实现这个功能呢？任何人都可以为我提供一种摆脱它的方式？谢谢。

来源

2011-04-26 Mellon

使用jQuery洒（只是因为）：

<html> 
<head> 
<title>test</title> 
</head> 
<body> 
<div id="notepad" style="width: 320px; height: 200px;border: 1px solid black"></div> 
</body> 
<script src="raphael-min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     var paper = Raphael("notepad", 320, 200); 
     var rect = paper.rect(10, 10, 50, 50); 
     var circle = false; 
     rect.attr("fill","red"); 
     jQuery(rect.node).click(function(evt){ 
      circle = paper.circle(100, 100, 40); 
      return false; 
     }); 
     jQuery("#notepad").click(function(evt){ 
      if(circle && evt.target.nodeName != "circle"){ 
      if(circle){ 
       circle.remove(); 
       circle = false; 
      } 
      } 
     }); 
    }); 
</script> 
</html>

来源

2011-04-26 14:42:54 Femi

为了消除拉斐尔圈，你可以使用remove command，就像这样：

circle.remove();

要在其他位置定义一个点击，你可以在body标签中使用点击事件：

document.body.onclick = function(){ 
    circle.remove(); 
}

您可以在您的矩形点击事件中添加return false;以防止它冒泡到身体单击事件：

rect.click(function(evt){ 
    circle = paper.circle(50, 50, 40); 
    return false; 
});

来源

2011-04-26 14:27:51

那我是怎么做到的，但它并不完美。

var graph = this.paper.path(path).attr({"stroke": "rgb("+color+")","stroke-width": "5"}); 
graph.hover(
function(){ 
    this.glow = this.paper.path(path).attr({"stroke": "rgb("+color+")","opacity":"0.4","stroke-width": "5"}).glow({color: "rgb("+color+")", width: 10}); 
}, 
function(){ 
    this.glow.remove(); 
} 
)

所以线索是我们创建了一个双路径，在原路径上具有更宽的宽度和不透明度。为了加倍路径，我使用前面声明的相同的path和color变量作为原始路径以及它的阴影和辉光。它在mouseover上删除就好了。

来源

2014-01-25 14:17:23 remort

Raphael.js新手：如何在鼠标点击“其他地方”时删除元素？

回答

相关问题