5

Javascriptのイベントハンドラーで次の問題が発生します。mousemove次のようなイベントハンドラーを持つオブジェクトがあります。

function MyObject(){ }
function MyObject.prototype = {

    currentMousePosition: null,
    onMouseMove: function(ev){
       this.currentMousePosition = this.getCoordinates(ev);
    },
    getCoordinates: function(ev){
        if (ev.pageX || ev.pageY)
            return { x: ev.pageX, y: ev.pageY };

        return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop };
    }

};

私が解決しようとしている問題は、オブジェクトコンテキストを中心に解決されます。私のonMouseMove関数内で、プロパティを割り当てcurrentMousePositionます。mousemoveこれはイベントを処理する静的関数であるため、当然これは機能しません。

私が探しているのは、イベントハンドラーでオブジェクトコンテキストを渡すためのテクニック/メソッドです。私が考えることができる最も良い例は、GoogleMapsAPI関数GEvent.bind()です。これを使用すると、指定したイベントで起動する関数を使用してオブジェクトを渡すことができます。私は本質的に同じものを探しています。

4

2 に答える 2

6

今日、多くの人々は明示的な閉鎖でこれを行います：

var myobject= new MyObject();
element.onmousemove= function() {
    myobject.onMouseMove();
};

ただし、将来的には、ECMAScriptFifthEditionメソッドを使用して実行する予定ですfunction.bind。

element.onmousemove= myobject.onMouseMove.bind(myobject);

（渡されたそれ以降の引数はfunction.bind、呼び出されたときにターゲット関数の引数リストの前に追加されます。）

ブラウザがすべてfunction.bindネイティブにサポートされるまで、プロトタイプとクロージャを使用して自分でサポートをハックすることができます。実装例については、この回答の下部を参照してください。

document.body.scrollLeft

document.bodyIEQuirksモードの場合のみです。クァークズモードになりたくありません。標準モードのDoctypeでは、document.documentElement代わりになります。したがって、いずれかのモードを使用する可能性のあるさまざまなページをサポートする必要がある場合、または何らかの理由でIE5をサポートする必要がある場合（希望しないでください）：

var viewport= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
return {x: ev.clientX+viewport.scrollLeft, y: ev.clientY+viewport.scrollTop};
于 2010-02-11T02:57:53.147 に答える
0

正しいコンテキストでハンドラーを呼び出すラッパー関数を渡す必要があります。

例えば：

addHandler(function(ev) { someObject.onMouseMove(ev); });
于 2010-02-11T02:59:11.813 に答える