オブジェクトをループして、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})