请解释此代码的含义

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

来源

2013-08-20 CBR

只是为了澄清，你的“你已经强调线”是指开始和结束“**”的台词，对不对？ – Katana314

+10

对于2012年的教程，我感觉有点ಠ_ಠ，它建议老式的侵入事件处理程序绑定。 – Pointy

@Pointy我希望这是一个来自多年前的复制粘贴课程 –

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

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

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

来源

2013-08-20 14:25:37 plalx

正如评论中指出的那样，侵入式事件处理的使用是非常老式的，现在不推荐使用。

但是回答代码实现拖放，当鼠标按下事件是由按下鼠标为鼠标松开和鼠标悬停（第4行的标记代码）当前的事件处理程序触发了你的问题“保存”并由执行拖放操作的事件处理程序取代。

当拖动的元素是“下降”，即鼠标松开事件触发时，鼠标移动和鼠标松开事件处理程序被替换为已保存（最后两行的标记码）

原始事件处理程序

来源

2013-08-20 14:30:27 Eriedor

this.oldMoveHandler引用的目的是存储以前的页面开发人员可能已添加到“document.body.onmousemove”的任何事件处理程序，其目标是不中断开发人员无疑会花费痛苦的时间建立。它是这样的：

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

这是一种避开先前代码的方法，虽然这是一个不好的解决方案。最好的方法是对野蛮的IE浏览器使用addEventListener/removeEventListener或attachEvent/detachEvent。这些函数的设计使得多个处理程序可以订阅相同的事件，而不会彼此踩踏。下面是一些良好的阅读：

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

来源

2013-08-20 14:31:25 CodeOwl

请解释此代码的含义

回答

相关问题