0

アドレスhttp://www.stanford.edu/~ouster/cgi-bin/cs142-spring12/lecture.php?topic=eventでチュートリアルを進めています。

また、アスタリスクでマークした行のコードについては理解できません。

function Dragger(id) {
    this.isMouseDown = false;
    this.element = document.getElementById(id);
    var obj = this;
    this.element.onmousedown = function(event) {
        obj.mouseDown(event);
    }
}

Dragger.prototype.mouseDown = function(event) {
    var obj = this;
    this.oldMoveHandler = document.body.onmousemove;  /******/
    document.body.onmousemove = function(event) {     /******/
        obj.mouseMove(event);
    }
    this.oldUpHandler = document.body.onmouseup;      /******/
    document.body.onmouseup = function(event) {       /******/
        obj.mouseUp(event);
    }
    this.oldX = event.clientX;
    this.oldY = event.clientY;
    this.isMouseDown = true;
}

Dragger.prototype.mouseMove = function(event) {
    if (!this.isMouseDown) {
        return;
    }
    this.element.style.left = (this.element.offsetLeft
            + (event.clientX - this.oldX)) + "px";
    this.element.style.top = (this.element.offsetTop
            + (event.clientY - this.oldY)) + "px";
    this.oldX = event.clientX;
    this.oldY = event.clientY;
}

Dragger.prototype.mouseUp = function(event) {
    this.isMouseDown = false;
    document.body.onmousemove = this.oldMoveHandler;   /******/
    document.body.onmouseup = this.oldUpHandler;       /******/
}
4

3 に答える 3

0

設定は、要素のイベントdocument.body.onmousemoveをリッスンする (醜い) 方法の 1 つです。mousemovedocument.body

したがって、 this.oldMoveHandler = document.body.onmousemove;単にイベント ハンドラ関数への参照を格納するだけです (存在する場合)。

element.addEventListenerイベント ハンドラーをアタッチするには、使用が推奨されることに注意してください。

于 2013-08-20T14:25:37.503 に答える