热门标签 | 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高级程序设计》不愧是大师写的书,
推荐阅读
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 基于KVM的SRIOV直通配置及性能测试
    SRIOV介绍、VF直通配置,以及包转发率性能测试小慢哥的原创文章,欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]
  • 解决JAX-WS动态客户端工厂弃用问题并迁移到XFire
    在处理Java项目中的JAR包冲突时,我们遇到了JaxWsDynamicClientFactory被弃用的问题,并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]
  • 本文探讨了在通过 API 端点调用时,使用猫鼬(Mongoose)的 findOne 方法总是返回 null 的问题,并提供了详细的解决方案和建议。 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 本文详细介绍了如何利用Go语言和WebSockets技术构建一个高效的实时聊天系统。随着网络应用的日益复杂化,实时交互成为了提升用户体验的关键要素之一。通过本指南,开发者可以学习到最新的技术和最佳实践。 ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
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社区 版权所有