Raphael.js Newbie: Как удалить элемент, если щелкнуть мышью «где еще»? - PullRequest
Новая
       0

Raphael.js Newbie: Как удалить элемент, если щелкнуть мышью «где еще»?

3 голосов
/ 26 апреля 2011

Я сделал прямоугольник: 

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

Я хотел бы реализовать другую функцию , которая при щелчке мышью " еще где ", всплывающий круг исчезает . « else-where » означает paper или любой элемент в paper.

Но paper не имеет события click , как тогда реализовать эту функцию? Кто-нибудь может предоставить мне способ избавиться от этого? Спасибо.

Ответы [ 3 ]

7 голосов
/ 26 апреля 2011

Чтобы удалить круг в Рафаэле, вы можете использовать команду удаления , например: 

circle.remove();

Чтобы определить щелчок в другом месте, вы можете использовать событие click для тега body: 

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

Вы можете добавить return false; к событию щелчка прямоугольника, чтобы предотвратить его всплытие до события щелчка тела: 

rect.click(function(evt){
  circle = paper.circle(50, 50, 40);
  return false;
});
2 голосов
/ 26 апреля 2011

С разбрызгиванием 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>
0 голосов
/ 25 января 2014

Вот как я это сделал, но это не идеально. 

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, которые были объявлены ранее для исходного пути и для его тени и свечения.Удаляет при наведении курсора просто отлично.

...