Raphaeljs麻煩與isPointInside和捕捉懸停事件

Question

我正在研究一個按鈕，當你將鼠標懸停在它上面時，展開顯示一個圖像和一些文本，需要作出不同的點擊事件的反應。事實證明，在一組事物上創建單個懸停事件需要棘手的解決方法，因爲當您在該組中的項目之間切換時，Raphael將檢測到鼠標進/出。 （原始問題：Hovering over a set of elements in Raphaeljs）

上述問題中的接受答案使用isPointInside函數來決定鼠標輸入/輸出是否實際上移入/移出整個集合。它的偉大工程與他們的演示：（藍色圓是有自己的修復，紅色無）

http://jsfiddle.net/amustill/Bh276/1

然而，出現在這個例子中，紅方代表我的形象，如果你快速移動鼠標之間紅場和藍場外，懸停事件從未被捕捉。另外，在紅場的邊界上移動通常會引起毛刺。

http://jsfiddle.net/wTUex/

爲什麼isPointInside似乎被錯誤地返回？有更準確的功能可以使用嗎？

Answer 1

更新答案（下原）

每談話評論，你也可以分配ID在箱子上，然後測試，鼠標移開時，鼠標下的新對象是否是或不是紅色矩形，像這樣：

var Paper = new Raphael(0, 0, 400, 300); 
var mat = Paper.rect(0, 0, 400, 300).attr({fill: "#CCC"}); 
mat.node.id = "mat"; 
// Hover in function 
function hoverIn() { 
    newBox.show(); 
    this.text.toFront(); 
    this.animate({ 
    height: 140, 
    width: 140, 
    x: 130, 
    y: 80 
    }, 100); 
} 

// Hover out function 
function hoverOut(e) { 
    console.log(e, e.toElement); 
    if (e.toElement.id !== "redbox") { 
     newBox.hide(); 
     this.animate({ 
      height: 100, 
      width: 100, 
      x: 150, 
      y: 100 
     }, 100); 
    } 
} 

var rect = Paper.rect(150, 100, 100, 100).attr({fill: 'blue' }); 
rect.node.id = "bluebox"; 
var newBox = Paper.rect(140, 90, 120, 120).attr({fill: 'red'}).hide(); 
newBox.node.id = "redbox"; 
rect.attr({r:5});  
rect.text = Paper.text(200, 150, 'Hover me!').attr('font-size', 12); 
rect.hover(hoverIn, hoverOut); 

jsFiddle

原來的答覆 我總是薦結束一個不同的解決方案：不要在複雜的情況下觸發hoverOut，只需在鼠標進入盒子外部時觸發它。

參見：How to prevent loss hover in Raphael?

var Paper = new Raphael(0, 0, 400, 300); 
//this should be colored white -- leaving as gray for clarity 
var mat = Paper.rect(0, 0, 400, 300).attr({fill: "#CCC"}); 
// Hover in function 
function hoverIn() { 
    console.log(newBox); 
    newBox.show(); 
    rect.text.toFront(); 
    rect.animate({ 
    height: 140, 
    width: 140, 
    x: 130, 
    y: 80 
    }, 100); 
}  

// Hover out function 
//notice "this" was replaced with "rect" since "this" now refers to mat 
function hoverOut() { 
    newBox.hide(); 
    rect.animate({ 
    height: 100, 
    width: 100, 
    x: 150, 
    y: 100 
    }, 100); 
} 

var rect = Paper.rect(150, 100, 100, 100).attr('fill', 'blue'); 
var newBox = Paper.rect(140, 90, 120, 120).attr({fill: 'red'}).hide(); 


rect.attr({r:5}); 

rect.text = Paper.text(200, 150, 'Hover me!').attr('font-size', 12); 
rect.mouseover(hoverIn); 
mat.mouseover(hoverOut); 

jsFiddle