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新手：如何在鼠標點擊「其他地方」時刪除元素？

回答

相關問題