javascript Raphael.js 新手：如何在鼠标单击“其他位置”时删除元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5791701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Raphael.js Newbie: How to remove element when mouse click "else where"?
提问by Mellon
I have rendered an rectangular :
我渲染了一个矩形：
var paper = Raphael("notepad", 320, 200);
var rect = paper.rect(10, 10, 50, 50);
I have implement the feature that when mouse click on the rectangular, there will be a circlepop up:
我已经实现了鼠标点击矩形时会弹出一个圆圈的功能：
rect .click(function(evt){
var circle=paper.circle(50, 50, 40);
});
I would like to implement anotherfeature that, when mouse click "else where", the pop-up circle disappear. "else-where" means paperor any elementon the paper.
我想实现另一个功能，当鼠标单击“其他位置”时，弹出圆圈消失。“其他-其中”装置paper或任何元件上paper。
But paperdoes not have clickevent, how can I implement this feature then? Anyone can provide me a way to get rid of it? Thank you.
但是paper没有点击事件，我该如何实现这个功能呢？任何人都可以为我提供摆脱它的方法吗？谢谢你。
采纳答案by Femi
With a sprinkling of jQuery (just because):
加上一点 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>
回答by Peter Olson
To remove the circle in Raphael, you can use the remove command, like this:
要删除 Raphael 中的圆圈，您可以使用remove 命令，如下所示：
circle.remove();
To define a click elsewhere, you can use a click event on the body tag:
要在别处定义点击，您可以在 body 标签上使用点击事件：
document.body.onclick = function(){
circle.remove();
}
You can add a return false;to your rectangle click event to prevent it from bubbling up to the body click event:
您可以return false;向矩形单击事件添加一个以防止它冒泡到主体单击事件：
rect.click(function(evt){
circle = paper.circle(50, 50, 40);
return false;
});
回答by remort
Thats how i did it, but it's not perfect.
我就是这样做的，但它并不完美。
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();
}
)
So the clue is that we create a double path with a wider width and opacity over an original path. For doubling the path I use the same pathand the colorvariables that was declared before for original path and for it's shadow and a glow. It removes on mouseover just fine.
所以线索是我们在原始路径上创建了一个具有更宽宽度和不透明度的双路径。为了使路径加倍，我使用相同path的color变量和之前为原始路径声明的变量以及它的阴影和发光。它在鼠标悬停时删除就好了。
