热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

记录这个没别的意思,之前这段代码貌没有问题,但是调试的时候移除事件貌不能用源代码如下:!--拖动div--!DOCTYPEhtmlPUBLIC-W3CDTDXHTML1.0TransitionalENwww.w3.orgTRxhtml1DTDxhtml1-transitional.dtdhtmlxmlnswww.w3.

记录这个没别的意思,之前这段代码貌没有问题,但是调试的时候移除事件貌不能用源代码如下: !--拖动p--!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.

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











    




一直搞不懂为什么事件不能移除?这个代码就一直放下了,结果刚才看《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($("p2"));

《Javascript高级程序设计》不愧是大师写的书,
推荐阅读
  • 本文介绍了jQuery的基本使用方法及AJAX技术的基础知识,包括选择器、事件处理、DOM操作、动画效果等核心功能,以及如何利用AJAX实现页面的部分刷新。 ... [详细]
  • django项目中使用手机号登录
    本文使用聚合数据的短信接口,需要先获取到申请接口的appkey和模板id项目目录下创建ubtils文件夹,定义返回随机验证码和调取短信接口的函数function.py文件se ... [详细]
  • 现在的新手程序猿,动不动就是框架,就连外面培训的也是框架,我就问一句,没了框架是不是就啥也不会了 ... [详细]
  • 解决fetch上传图片至微信公众号H5页面的问题
    在近期的一个项目需求中,需要在微信公众号内嵌入H5页面,并实现用户通过该页面上传图片的功能,包括拍摄新照片或从已有相册中选择。前端开发中采用了fetch API进行接口调用,但遇到了上传图片时数据无法正确传递的问题。 ... [详细]
  • 本文详细介绍了如何手动编写兼容IE的Ajax函数,以及探讨了跨域请求的实现方法和原理,包括JSONP和服务器端设置HTTP头部等技术。 ... [详细]
  • 本文详细探讨了 Java 中 Daemon 线程的特点及其应用场景,并深入分析了 Random 类的源代码,帮助开发者更好地理解和使用这些核心组件。 ... [详细]
  • 本文详细介绍了如何在JavaScript中使用jQuery库进行AJAX异步请求,包括请求的基本配置和处理流程。同时,探讨了阿里巴巴的FastJSON库在JSON数据解析中的应用,并简要介绍了Highcharts图表插件的使用方法。 ... [详细]
  • 开发笔记:异步实时搜索jquery select插件
    开发笔记:异步实时搜索jquery select插件 ... [详细]
  • 精选10款jQuery内联编辑插件
    本文精选了10款优秀的jQuery内联编辑插件,旨在帮助开发者实现页面内容的动态管理和即时编辑,提升用户体验。 ... [详细]
  • 深入理解SAP Fiori及其核心概念
    本文详细介绍了SAP Fiori的基本概念、发展历程、核心特性、应用类型、运行环境以及开发工具等,旨在帮助读者全面了解SAP Fiori的技术框架和应用场景。 ... [详细]
  • 使用jQuery与百度地图API实现地址转经纬度功能
    本文详细介绍了如何利用jQuery和百度地图API将地址转换为经纬度,包括申请API密钥、页面构建及核心代码实现。 ... [详细]
  • 本文介绍了如何通过安装和配置php_uploadprogress扩展来实现文件上传时的进度条显示功能。通过一个简单的示例,详细解释了从安装扩展到编写具体代码的全过程。 ... [详细]
  • Asynchronous JavaScript and XML (AJAX) 的流行很大程度上得益于 Google 在其产品如 Google Suggest 和 Google Maps 中的应用。本文将深入探讨 AJAX 在 .NET 环境下的工作原理及其实现方法。 ... [详细]
  • Python作为一种广泛使用的高级编程语言,以其简洁的语法、强大的功能和丰富的库支持著称。本文将详细介绍Python的主要特点及其在现代软件开发中的应用。 ... [详细]
  • 手把手教你构建简易JSON解析器
    本文将带你深入了解JSON解析器的构建过程,通过实践掌握JSON解析的基本原理。适合所有对数据解析感兴趣的开发者。 ... [详细]
author-avatar
幽雅闲居xl
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有