"this"를 사용하면 함수가 컨텍스트를 잃습니다 - Raphael JS

Question

Raphael에서 객체를 반복하면서 원을 만듭니다. 내가 만든 각 서클에서 클릭 이벤트와 마우스 오버 이벤트를 첨부합니다. 그러나 "this"를 사용하여 원을 앞쪽으로 이동하면 this.toFront()와 같이 내 .click 함수가 작동하지 않습니다. this.toFront()에 대한 주석을 작성하면 클릭 기능이 예상대로 작동합니다.

내가 뭘 잘못하고 있는지 이해하도록 도와 줄 수 있습니까?

//dummy variables for example 
var x_coord = '31'; 
var y_coord = '50'; 
var diameter = '80'; 
var opportunityUrl = 'http://www.google.com'; 
var fillColorStart = '#000'; 
var fillColorEnd = '#FF0000'; 

var p = paper.circle(x_coord, y_coord, diameter) 
.data("i", i) 
.click(function() { 
    alert(opportunityUrl); 
}) 
.mouseover(function() { 
    this.toFront(); 
}) 
.attr({"fill": "90-"+fillColorStart+":5-"+fillColorEnd+":95","fill-opacity": 0.5}) 
.glow({color: "#4b4b4b", width: 7}) 

Answer 1

나는 라파엘 완전히 어떻게 작동하는지 모르겠어요 동안, 나는이 경우 this는 윈도우 객체를 참조 생각합니다. 이렇게하면 이벤트 체인이 깨져 오브젝트의 모든 이벤트가 중단되어 .click()이 작동하지 않게됩니다.

Answer 2

비슷한 질문에 대답했습니다. here. 기본적으로 익명 함수 내의 this 포인터는 사용자가 생각하는 바를 참조하지 않습니다.

귀하의 경우, Elliot이 위에 말한 것을 수행하는 것이 아마도 가장 쉬운 해결책 일 것입니다.