// 事件对象的相关属性
        // 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. 《c#高级编程》第2章C#2.0中的更改（四）——空值类型

    一.概念 在C#中,空值类型(Nullable Types)是一种特殊的数据类型,它可以包含正常值或者一个null值.当我们需要在程序中处理可能不存在的值时,空值类型就会派上用场. 空值类型的语法形式 ...

  2. 力扣485(java)-最大连续数1的个数（简单)

    题目: 给定一个二进制数组, 计算其中最大连续 1 的个数. 示例: 输入:[1,1,0,1,1,1]输出:3解释:开头的两位和最后的三位都是连续 1 ,所以最大连续 1 的个数是 3. 提示: 输入 ...

  3. EventBridge 特性介绍｜以 IaC 的方式使用 EventBridge

    ​简介:本文将重点介绍 EventBridge 和 IaC 的重点概念和特性,然后演示如何应用 IaC 理念自动化部署 EventBridge 来使用这些概念和特性. 作者:王川(弗丁) 引言 Eve ...

  4. 项目版本管理的最佳实践：云效飞流Flow篇

    简介: 飞流Flow的最佳实践(使用阿里云云效)为了更好地使用飞流Flow,接下来将结合阿里云云效来讲解飞流Flow的最佳实践 目录 一.分支规约 二.版本号规约 2.1 主版本号(首位版本号) 2. ...

  5. 最佳实践丨云上虚拟IDC（私有池）如何为客户业务的确定性、连续性保驾护航

    ​简介: 企业业务上云后,还面临特定可用区购买云上特定计算产品实例失败的困境?云上私有池pick一下 Why 云上业务为什么需要资源确定性.服务连续性 云计算正朝着像水电煤一样的基础设施演进,支持用户 ...

  6. [GPT] 使用 nodejs的 puppeteer 库使用完关闭后，linux上面有很多 chrome 进程

      在使用 Node.js 的 Puppeteer 库时,如果你在使用完后关闭了浏览器,但在 Linux 上仍然存在很多 Chrome 进程,可能是因为没有正确地关闭所有相关的进程. 可以尝试以下方法 ...

  7. 使用 Uno Islands 在现有 WPF 里面嵌入 Uno 框架

    随着 2022 9 月份 Uno 发布了 4.5 版本,现有的 WPF 应用多了一个新的开发模式,那就是通过 Uno Islands 技术,在现有的 WPF 应用里面嵌入 Uno 应用.通过此方式可以 ...

  8. dotnet 使用 WpfAnalyzers 辅助分析 WPF 应用代码缺陷

    引入 WpfAnalyzers 代码分析工具,相当于给团队加入一个免费的代码审查工具人,可以帮忙在日常开发找到很多代码缺陷.加入 WpfAnalyzers 代码分析工具,可以减少代码编写里的低级缺陷, ...

  9. 前端关于获取网络时间的方法api

    淘宝 http://api.m.taobao.com/rest/api3.do?api=mtop.common.getTimestamp 苏宁http://quan.suning.com/getSys ...

  10. Lua 学习笔记（自用）

    Lua 学习笔记 1 语言基础 运行方式类似Python,可以直接在交互行运行,也可以通过解释器运行某个脚本.也可以在交互行运行某个lua脚本 dofile("hello.lua" ...