正確使用prototype.js的Event.stopObserving方法

今天使用時發現Event.stopObserving的一些問題，其實是使用得方法不當造成的。

對于以下代碼：

var ClassA = Class.create();
ClassA.prototype = {
initialize : function(){},
observe : function(){
Event.observe($(’span’),’click’,this._handlerA.bind(this));

Event.observe($(’span’),’click’,this._handlerB);

},

_handlerA : function(){
alert(’observer a’);
},

_handlerB : function(){
alert(’observer b’);
},

stopObserving : function(){
Event.stopObserving($(’span’),’click’,this._handlerA.bind(this));

Event.stopObserving($(’span’),’click’,this._handlerB);
}

}

正常使用時：

var ins = new ClassA();

ins.observe();

之后點擊id=”span”的標簽之后會正常調用ins._handlerA/B兩個方法，接著執行：

ins.stopObserving()方法之后，奇怪的現象發生了，會發現ins._handlerA依舊執行，也就是說并沒有將原本hook到span上面的onclick handler A給取消掉。

原因是：對于

Event.observe($(’span’),’click’,this._handlerA.bind(this));

這一行來說，this._handlerA.bind(this)是一個anonymous function,并沒有一個確定的pointer指向這個function,所以當執行

Event.stopObserving($(’span’),’click’,this._handlerA.bind(this));

這一行的時候，this._handlerA.bind(this)指向另一個位置，所以并沒有unhook span onclick event.

解決的辦法就是對于一個需要unhook的event來說，不要使用一個anonymous function 作為其event handler.


我在使用也遇到同樣的問題，

在另一個blog看到解決這個問題的方法?
????
this.handler=this._handlerA.bind(this); //讓一個變量指向他

Event.observe($('span'),'click',this.handler);

Event.stopObserving($('span'),'click',this.handler);

這樣就沒有問題了