您现在的位置是:首页 > 正文

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

2024-01-30 23:09:38阅读 0

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

<!--拖动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高级程序设计》不愧是大师写的书,

网站文章

  • 【Linux】常用指令一览

    最近我在学习Linux。我将我了解到的命令列举一下,仅供大家参考

    2024-01-30 23:09:21
  • 【螺钉和螺母问题】【算法分析与设计】假设我们有n个直径各不相同的螺钉以及n个相应的螺母...

    教材原题假设我们有n个直径各不相同的螺钉以及n个相应的螺母。我们一次只能比较一对螺钉和螺母,来判断螺母是大于螺钉、小与螺钉还是正好适合螺钉。然而我们不能拿两个螺母做比较,也不能拿两个螺钉做比较。我们的...

    2024-01-30 23:09:17
  • Mysql-慢日志详解

    Mysql-慢日志详解

    Mysql-慢日志详解 mysql慢日志是什么? 慢查询日志由 long_query_time 执行时间超过几秒钟并且至少 min_examined_row_limit 需要检查行的 SQL 语句组成...

    2024-01-30 23:08:46
  • 攻防世界-MISC新手练习题集(三)

    攻防世界-MISC新手练习题集(三)

    攻防世界-MISC新手练习题集 Erik-Baleog-and-Olaf can_has_stdio? Training-Stegano-1 simple_transfer 2017_Dating_in_Singapore pure_color

    2024-01-30 23:08:38
  • python爬虫学习入门1 urllib 库

    python爬虫 学习学习爬虫因为爬取的一般都是网站,在后期可能会出现需要登陆网站等等的信息, 因此在学爬虫前需要大致的了解一下html 网站的架构,以及前端向后端传递参数时候的大致要求.http ...

    2024-01-30 23:08:31
  • Minikube vs. kind vs. k3s vs k3d vs MicroK8s

    Minikube vs. kind vs. k3s vs k3d vs MicroK8s

    另一个不同之处是,k3s 的设计易于在生产环境中部署,这使其成为在本地环境中为生产级工作负载运行 Kubernetes 的最受欢迎的选择之一,而 k3d 更适合在更小的环境中使用,例如 Raspber...

    2024-01-30 23:08:23
  • 福大计算机专业排名,2019福州大学专业排名

    福州大学是国家“211工程”重点建设高校。在福州大学众多的优秀专业中,称得上最好的专业有7个专业,这些专业是国家级重点学科,也可以说是福州大学的人才聚集地。为了让大家更好的了解这所大学的专业排名,下面...

    2024-01-30 23:07:53
  • Android之简洁天气

    Android之简洁天气

    为什么80%的码农都做不了架构师?>>> ...

    2024-01-30 23:07:46
  • [LeetCode258] Add Digits

    Given a non-negative integer num, repeatedly add all its digits until the result has only one digit.For example:Given num = 38, the process is like: 3 + 8 = 11, 1 + 1 = 2. Since 2 has on

    2024-01-30 23:07:38
  • 指令

    指令 指令的定义 指令又称为机器指令,是指计算机执行某种操作的命令,是计算机运行的最小功能单位,一台计算机的所有指令的集合构成的指令系统,又称为指令集 一台计算机只能够执行自己指令系统中的指令,不能够...

    2024-01-30 23:07:07