断开 Raphael 元素事件

Question

我将 onmouseout 事件附加到 Raphael 圆形元素，如下所示：

    (function(el,iElPos,col){
        el.mouseout(function elmouseout(){el.animate({"fill":col,"r":ELEMENT_RADIUS},150);
                               alert("first");
                               fadeTag();
                               });              
    )(c,i,elementColour);

c 是元素。然后，我稍后希望断开该事件的连接并附加另一个事件：

(function (el){
    el.attr("fill",EXCLUDED_COLOUR);
    el.unmouseout(elmouseout);
    el.mouseout(function elmouseout(){
                       alert("second");
                       el.animate({"fill":EXCLUDED_COLOUR,"r":ELEMENT_RADIUS},150);
                       fadeTag();
                       });
})(setMainSeries[iPos]);

但这会附加两个事件。两个警报都会触发，后附加的事件首先触发。我想完全断开第一个事件。我是否错误地使用了 unmouseout() ？

更新

我尝试了 echo-flow 和 lincolnk 的建议，但都不起作用。我认为回声流可能更有效。我像这样分解了建议的函数...

function elmouseoutDefault(el){
    el.animate({"fill":ELEMENT_COLOUR,"r":ELEMENT_RADIUS},150);
    alert("first");
    fadeTag();
};

然后在创建每个元素时附加了这样的事件...

el.mouseout(elmouseoutDefault);

但是这失败了，因为我没有传递 el。所以我将其更改为...

el.mouseout(elmouseoutDefault(el));

这似乎在添加时调用 elmouseoutDefault 。我只希望它在鼠标移出事件时触发。

Answer 1

这看起来像是在哪里声明函数名称的问题 - 我认为当您使用名称内联定义函数时，事情会变得很棘手。这应该使函数更可靠地引用。

var elmouseout = null;

(function (el, iElPos, col) {

    elmouseout = function () {
        el.animate( {"fill": col, "r": ELEMENT_RADIUS }, 150);
        alert("first");
        fadeTag();
    };

    el.mouseout(elmouseout);

})(c, i, elementColour);


(function (el) {

    el.attr("fill", EXCLUDED_COLOUR);

    el.unmouseout(elmouseout);

    elmouseout = function () {
        alert("second");
        el.animate( { "fill": EXCLUDED_COLOUR, "r": ELEMENT_RADIUS}, 150 );
        fadeTag();
    };

    el.mouseout(elmouseout);

})(setMainSeries[iPos]);

编辑：这是一个范围的事情 - 您对 elmouseout 的定义仅存在于自调用函数的范围内。我正在考虑有关函数名称的另一个问题。不过代码应该仍然可以工作。

Answer 2

我想根据您的工作代码验证这一点，但根据您发布的代码，我认为正在发生的情况如下：在两个代码片段中，您都声明了一个函数“elmouseout”。您使用的函数声明语法在局部作用域中声明函数（相当于编写“var elmouseout = function(){...}”），并且因为您在单独的函数闭包内部声明每个变量，所以变量“第二个代码块中的“elmouseout”指的是第二个代码块中的函数“elmouseout”，而不是第一个代码块，这将产生所需的行为。我建议分解函数声明，如下所示：

function elmouseout(e){e.target.animate({"fill":col,"r":ELEMENT_RADIUS},150);
                               alert("first");
                               fadeTag();
                               }

    (function(el,iElPos,col){
        el.mouseout(elmouseout);              
    )(c,i,elementColour);


function elmouseout2(e){
                       alert("second");
                       e.target.animate({"fill":EXCLUDED_COLOUR,"r":ELEMENT_RADIUS},150);
                       fadeTag();
                       }

(function (el){
    el.attr("fill",EXCLUDED_COLOUR);
    el.unmouseout(elmouseout);
    el.mouseout(elmouseout2);
})(setMainSeries[iPos]);