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

2

this.oldMoveHandler 引用的目的是存储页面的先前开发人员可能添加到“document.body.onmousemove”的任何事件处理程序，目的是不中断开发人员无疑花费大量时间构建的任何行为。它是这样的：

  1. 用鼠标按下，存储旧的处理程序，添加我们花哨的拖动处理程序。

  2. 移动鼠标，出现可爱的拖动行为。

  3. 释放鼠标，拖动行为停止，恢复旧的处理程序（即使它为空）。

这是一种避开以前代码的方法，尽管它是一个糟糕的解决方案。对于野蛮的 IE 浏览器，更受欢迎的方法是使用 addEventListener/removeEventListener 或 attachEvent/detachEvent。这些函数被设计成多个处理程序可以订阅同一个事件而不会互相踩踏。这里有一些很好的阅读：

http://www.quirksmode.org/js/introevents.html

于 2013-08-20T14:31:25.493 回答
0

设置是监听元素事件的document.body.onmousemove一种（丑陋的）方式。mousemovedocument.body

因此， this.oldMoveHandler = document.body.onmousemove;只是存储对事件处理函数的引用（如果有）。

请注意，使用element.addEventListener附加事件处理程序是首选。

于 2013-08-20T14:25:37.503 回答
0

如评论中所述，使用侵入式事件处理非常过时，现在不推荐使用。

但是，要回答您的问题，代码正在实现拖放，当鼠标按下触发mousedown事件时， mouseup和mouseover的当前事件处理程序（前 4 行标记的代码）被“保存”并替换为事件处理程序将执行拖放操作。

当拖动的元素被“放下”时，即触发mouseup事件，mousemove和mouseup事件处理程序将替换为保存的原始事件处理程序（最后 2 行标记的代码）

于 2013-08-20T14:30:27.333 回答