Raphael.js Newbie: How to remove element when mouse click "else where"?
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 circle pop up:
rect .click(function(evt){
var circle=paper.circle(50, 50, 40);
});
I would like to implement another feature that, when mouse click "else where", the pop-up circle disappear. "else-where" means paper or any element on the paper.
But paper does not have click event, how can I implement this feature then? Anyone can provide me a way to get rid of it? Thank you.
To remove the circle in Raphael, you can use the remove command, like this:
circle.remove();
To define a click elsewhere, you can use a click event on the body tag:
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:
rect.click(function(evt){
circle = paper.circle(50, 50, 40);
return false;
});
With a sprinkling of jQuery (just because):
<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>
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 path and the color variables that was declared before for original path and for it's shadow and a glow. It removes on mouseover just fine.
加载中,请稍侯......
精彩评论