DIV拖动及DOM2移除事件注意事项

来源：互联网发布：java程序员买书编辑：程序博客网时间：2024/05/21 12:00

记录这个没别的意思，之前这段代码貌似没有问题，但是调试的时候移除事件貌似不能用源代码如下：

<!--拖动div--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>*{margin: 0;padding: 0}.mg10{margin: 10px;}.g{background: #333333}.fl{float: left;}#div11{width:200px;height:400px;}#div2{width:300px;height:610px;}#div12{width:200px;height:200px;}</style><!--<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>--></head><body>    <!-- <div id="div1" class="fl">    <div id="div11" class="g mg10"></div>    <div id="div12" class="g mg10"></div></div> --><div id="div2" class="g mg10"></div><script type="text/javascript">      /**  * 绑定事件  **/     var addEvent =  function(obj, eventName, handle) {    if(window.addEventListener) {        obj.addEventListener(eventName, handle, false);    }else {        obj.attachEvent("on" + eventName, handle);    }  }  var removeEvent = function (obj, eventName, handle){     if (window.removeEventListener) {      obj.removeEventListener(eventName, handle, false);    }else if(window.detachEvent){       obj.detachEvent("on" + eventName, handle);      }else {      obj["on" + eventName] = null;    }  };   var $ = function(id) {    return "string" == typeof id ? document.getElementById(id) : id;  }  //js兼容性  var page = {    event: function (evt) {        var ev = evt || window.event;        return ev;    },    target: function(evt) {        return evt.target || evt.srcElement;    },    pageX: function (evt) {        var e = this.event(evt);        return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);    },    pageY: function (evt) {        var e = this.event(evt);        return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);    },    layerX: function (evt) {        var e = this.event(evt);        return e.layerX || e.offsetX;    },    layerY: function (evt) {        var e = this.event(evt);        return e.layerY || e.offsetY;    }  }               var drag = function(obj) {    obj.style.position="absolute";    addEvent(obj,"mousedown", function(event){      var target = page.target(event);      var x = page.layerX(event);      var y = page.layerY(event);            addEvent(obj,"mousemove", function(event){        var tx = page.pageX(event) - x;        var ty = page.pageY(event) - y;        target.style.left = tx + "px";        target.style.top = ty + "px";      });      addEvent(obj,"mouseup", function(event){        obj.style.position="relative";        removeEvent(obj, "mousemove",function(){});              });    });  }    drag($("div2"));      </script></body></html>

一直搞不懂为什么事件不能移除？这个代码就一直放下了，结果刚才看《javascript高级程序设计》才知道removeEventListener不能传无参的构造函数，因为addEventListener可以给元素绑定多个事件，所以removeEventListener的时候找不到了！修改好的代码如下：

 /**  * 绑定事件  **/     var addEvent =  function(obj, eventName, handle) {    if(window.addEventListener) {        obj.addEventListener(eventName, handle, false);    }else {        obj.attachEvent("on" + eventName, handle);    }  }  var removeEvent = function (obj, eventName, handle){     if (window.removeEventListener) {      obj.removeEventListener(eventName, handle, false);    }else if(window.detachEvent){       obj.detachEvent("on" + eventName, handle);      }else {      obj["on"+eventName] = null;    }  };   var $ = function(id) {    return "string" == typeof id ? document.getElementById(id) : id;  }  //js兼容性  var page = {    event: function (evt) {        var ev = evt || window.event;        return ev;    },    target: function(evt) {        return evt.target || evt.srcElement;    },    pageX: function (evt) {        var e = this.event(evt);        return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);    },    pageY: function (evt) {        var e = this.event(evt);        return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);    },    layerX: function (evt) {        var e = this.event(evt);        return e.layerX || e.offsetX;    },    layerY: function (evt) {        var e = this.event(evt);        return e.layerY || e.offsetY;    }  }               var drag = function(obj) {    obj.style.position="absolute";    var mousedownFun, mousemoveFun, mouseupFun, x, y, target;    mousedownFun = function(event){        target = page.target(event);        x = page.layerX(event);        y = page.layerY(event);                addEvent(obj,"mousemove", mousemoveFun);        addEvent(obj,"mouseup", mouseupFun);    };    mousemoveFun = function(event){        var tx = page.pageX(event) - x;        var ty = page.pageY(event) - y;        target.style.left = tx + "px";        target.style.top = ty + "px";    };    mouseupFun = function(event) {        removeEvent(obj, "mousemove",mousemoveFun);        removeEvent(obj, "mouseup",mouseupFun);    }    addEvent(obj,"mousedown", mousedownFun);  }    drag($("div2"));

《javascript高级程序设计》不愧是大师写的书，赞

0 0