关于为多个DIV加拖拽里面this的问题

关于调试

话说一个程序员的调试能力可体现出他的整体素质。所以我要养成好的调试习惯，减少在调试上花的时间。

解决问题

今天在为多个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