// 事件对象的相关属性
        // e.target   触发事件的标签对象
        //            e.target支持所有标签对象的操作
        // e.target.parentElement   直接父级标签对象
        // e.target.parentNode      直接父级标签对象
        // e.target.tagName         触发事件的标签对象名称  全大写英文字母
        // 点击事件中,e事件对象中存储的坐标信息
        // 键盘事件中,e事件对象中存储的按键信息
        // 点击事件和键盘事件,e事件对象中存储的信息内容是不同的
        // 只能获取鼠标点击的位置坐标,不能设定鼠标位置的坐标
        // offsetX  offsetY
        //     触发事件的标签对象,左上角为坐标原点
        // 在鼠标拖拽时,会有大问题
        //     获取鼠标坐标时,原点,会改变
        //     例如,在整个页面中拖拽div
        //          起始时,坐标原点是 document 文档的左上角
        //          当鼠标经过div时,坐标原点是 div 的左上角
        //          获取的坐标数值不同,会造成 div 闪来闪去  
        // clientX  clientY
        //     视窗窗口,左上角为坐标原点  
        // pageX  pageY
        //     HTML文档,左上角为坐标原点  
        // 当页面没有滚动时,两个坐标数据相同
        // 当页面发生滚动时,两个坐标数据不同
        var oDiv = document.querySelector('div');
        oDiv.addEventListener('click' , function(e){
            e = e || window.event;
            console.log(e);
        })
 
 <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 5000px;
        }
        div{
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="./tools.js"></script>
    <script>
        // 通过点击鼠标,控制div的位置
        // 让div位置与鼠标点击位置相同
        // 获取鼠标点击时的坐标,设定为div标签定位的坐标数据
        // 默认执行效果,定位之后,div的左上角与鼠标重合
        
        // 如果需要其他位置与鼠标重合,就需要调整定位的数值
        // 例如: 需要div中心位置与鼠标重合 : 定位数值 - div宽度高度的一半 
        var oDiv = document.querySelector('div');
        // 给 document 整个文档添加点击事件
        document.addEventListener('click' , function(e){
            e = e || window.event;
            // 如果需要div中心与鼠标位置重合
            // 需要获取div的宽度,高度
            // 注意:宽度高度,有px单位,要去掉
            // var h = parseInt(myGetStyle(oDiv , 'height'));
            // var w = parseInt(myGetStyle(oDiv , 'width'));
            // 也可以通过标签占位,获取标签的宽度高度占位
            // offsetHeight   offsetWidth
            // 直接获取数据数值,没有px单位的
            var h = oDiv.offsetHeight;
            var w = oDiv.offsetWidth;
            console.log(h,w);
            // 因为有页面滚动的问题
            // 使用:clientX   和   clientY
            // div中心与鼠标位置重合,需要再减去div宽度高度的一半
            var top = e.clientY - h/2;
            var left = e.clientX - w/2;
            // 设定为 div 的定位数据 , 并且拼接px单位
            oDiv.style.top = top + 'px';
            oDiv.style.left = left + 'px';
        })
    </script>

事件对象的属性 div点击移动事件的更多相关文章

  1. JQuery事件对象的属性和方法

    这是今天的总结,以后学习自己可以当参考书来读读.Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.事件通常与函数结合使用,函数不会在事件发生前被执行 ...

  2. jQuery事件对象的属性

    注:摘自<锋利的jQuery(第二版)> JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. 1. ...

  3. jq的事件对象的属性

    1.event.type() 该方法的作用是可以获取到时间的类型 $('a').click(function(){ alert(event.type);//获取事件类型 return  false;/ ...

  4. jQuery 事件对象的属性

    jQuery 在遵循 W3C 规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. (1) event.type 该方法的作用是可以获取到 ...

  5. 事件对象的属性，基于jQuery(jquery针对不同浏览器进行了兼容性的封装)

    1. event.type(该方法是获取到事件的类型) $( 'a' ).click( function( event ){ alert( event.type ); //click return f ...

  6. js事件对象

    哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. ...

  7. jQuery通过event获取点击事件的事件对象

    要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...

  8. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  9. JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  10. jQuery事件对象event的属性和方法

    事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...

随机推荐

  1. 自动化部署脚本--一键部署单机版k8s

    cat danjiDeploy_k8s.sh #!/bin/bash . /etc/init.d/functions # 版本 VERSION=v1.0.1 # IP地址,默认为本机第一块网卡IP地址 ...

  2. Linq大白话深入浅出从零基础到手写开源工具兵贵神速系列（一）——为啥需要Linq

    所有的技术创新都是为了解决编程实践中的难点和痛点! 如果我们不懂得这项技术所要解决的难点和痛点,我们在使用这项技术的时候就很可能走偏,在细节末节上隔靴搔痒,耗费很长的时间还掌握不了这项技术的精髓! 而 ...

  3. Oracle sql 月份的加减以及差值

    Oracle sql 月份的加减以及差值 差值 使用months_between,输出的是两个日期的差值 select months_between(TO_DATE('2022-05-31','yyy ...

  4. 力扣240(java&python)-搜索二维矩阵 II（中等）

    题目: 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target .该矩阵具有以下特性: 每行的元素从左到右升序排列.每列的元素从上到下升序排列. 示例 1: 输入:ma ...

  5. 力扣507(java)-完美数（简单）

    题目: 对于一个 正整数,如果它和除了它自身以外的所有 正因子 之和相等,我们称它为 「完美数」. 给定一个 整数 n, 如果是完美数,返回 true:否则返回 false. 示例 1: 输入:num ...

  6. 阿里云 ACK 容器服务生产级可观测体系建设实践

    简介: 随着容器被越来越对企业接纳与落地,可观测成为重点.那么,让我们深入了解阿里云 ACK 容器服务生产级可观测体系建设实践,为自身业务可观测提供参考- 作者:冯诗淳(行疾)   ACK 可观测体系 ...

  7. 菜鸟 CPaaS 平台微服务治理实践

    简介: 在使用 MSE 的云产品之后,对 PaaS 平台层来说,避免很多重复功能的建设.在我们业务侧实际落地的远不止如上列举的场景,比如:服务优雅停机.注册中心等能力,均解决了业务侧的微服务治理上的难 ...

  8. dotnet C# 通过 Vortice 使用 Direct2D 的 ID2D1CommandList 入门

    本文将告诉大家如何通过 Vortice 使用 D2D 的 CommandList 功能 本文属于 DirectX 系列博客,更多 DirectX 和 D2D 以及 Vortice 库的博客,请参阅我的 ...

  9. 圈子社交系统--在线了解前后端,APP小程序H5,三端源码交付-多重玩法，新奇有趣。

    圈子论坛社区系统,含完整的后台PHP系统.功能:小程序授权登陆,H5和APP,手机号登陆,发帖,建圈子.发活动.圈主可置顶推荐帖子,关注.点赞.评论.交流等.可作为圈子贴吧等自媒体. 一款全开源支持免 ...

  10. 在tomcat上安装PFX格式证书部署https

    您可以在Tomcat服务器安装已签发的SSL证书,实现通过HTTPS安全访问Web服务.本文介绍如何在Tomcat服务器安装PFX格式的SSL证书. 步骤一:在阿里云的域名管理后台,下载SSL证书 登 ...