Raphael.js Newbie: How to remove element when mouse click "else where"?_问答_开发者

Raphael.js Newbie: How to remove element when mouse click "else where"?

开发者 https://www.devze.com 2023-03-01 06:48 出处：网络

I have rendered an rectangular : var paper = Raphael(\"notepad\", 320, 200); var rect = paper.rect(10, 10, 50, 50);

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

开发者_如何学Python

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.