关于调试
话说一个程序员的调试能力可体现出他的整体素质。所以我要养成好的调试习惯，减少在调试上花的时间。
解决问题
今天在为多个div加拖拽时发现无法运行程序，于是开始分析。首先在没有看出代码明显错误的情况下我就从基本的代码开始排查。先看控制台是否报错，这时我的控制报，没有style属性。按照以往的经验一般是对象的问题，于是使用alert();的方法， 先从获取元素开始，经排查发现元素获取正确，然后排查onmousedown 事件， 将alert放入事件末尾发现还是能执行。 在排查onmousemove时发现alert已经不执行了。说明果然是对象的问题，因为这里写着改Left 和top 的代码，是用的this.style.left; 也就是说我的this用的有问题,当时我就alert(this);弹出 [object HTMLDocument] 这里的this指向document,因为我是用的document.onmousemove .所以是document事件的this。所以要想代码执行起来必须解决this的问题。 一开始我就想能不能将div循环里aDiv[i]放到这里来，试了一下结果不行，然后机开始想办法将onmousedown的this如何用到onmousemove来。 这是想到可以定义一个变量因为onmousemove是onmousedown子函数所以在副函数定义变量子函数是可以获取的， 这就是闭包。于是我就定义了 _this = this . onmousemove 里就用_this ，结果就可以运行了。 代码如下：
window.onload = function () {
var aDiv = document.body.getElementsByTagName('div');
for (var i = 0; i < aDiv.length; i++){
aDiv[i].onmousedown = function(ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - this.offsetLeft;
var disY = oEvent.clientY - this.offsetTop;
var _this = this; // 定义一个变量来接收 这里的this
document.onmousemove = function(ev){
var oEvent = ev || event;
l = oEvent.clientX - disX;
t = oEvent.clientY - disY;
_this.style.left = l + 'px'; // 引用鼠标按下里面的this
_this.style.top = t + 'px'; // 引用鼠标按下里面的this
//alert(this); //[ object HTMLDocument]
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
_this.releaseCaptrue && _this.releaseCaptrue();
};
_this.setCaptrue && _this.setCaptrue();
return false;
};
}
};
end
