Question

我正在阅读地址：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;       /******/
}

Answer 1

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

用鼠标按下，存放旧处理程序，添加我们的花式拖动处理程序。
移动鼠标，发生可爱的拖动行为。
释放鼠标，拖动行为停止，恢复旧处理程序（即使它为空）。

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

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

Answer 2

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

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

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

Answer 3

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

然而，要回答您的问题，代码正在实施拖放，当鼠标按下鼠标悬停和的当前事件处理程序触发 mousedown 事件时mouseover （标记代码的前4行）被“保存”，并由将执行拖放的事件处理程序替换。

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

请解释这段代码的含义

3 个答案: