event.offsetX、event.offsetY(相对事件发生的具体元素左上角的定位)

鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

event.clientX、event.clientY(相对可视区域左上角的绝对定位)

鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY(整个HTML文档中的绝对定位)

类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

event.screenX、event.screenY(不常用)

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性(就是上面的地址栏,收藏夹都会算进去)

ev的offsetX,pageX,clientX和screenX的更多相关文章

  1. offsetX、clientX、screenX、pageX、layerX

    pageX/Y 原点相对于文档窗口左上角. offsetX/Y 原点相对于触发事件元素的左上角,需要注意的是,offset是有负值的,如果你的元素有边框,那么offset会是负值. (黑色为鼠标点击点 ...

  2. offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

    一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...

  3. clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  4. pageX,clientX,offsetX,layerX的区别

    pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...

  5. pageX,clientX,offsetX,layerX的那些事

    在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...

  6. JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别

    首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反 ...

  7. JavaScript 中事件对象参数:clientX、clientY、offsetX、offsetY、screenX、screenY

    JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...

  8. pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标e.layerX-- ...

  9. pageX,clientX,screenX,offsetX的区别

    pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不 ...

随机推荐

  1. 【读书笔记】Linux内核设计与实现(第三章)

    3.1 进程 处于执行期的程序. 进程就是正在执行的程序代码的实时结果.内核需要有效而又透明地管理所有细节. 执行线程(简称线程):在进程中活动的对象.每个线程都拥有一个独立的程序计数器.进程栈和一组 ...

  2. Linux实践一:问题及解决

    安装ubuntu出现的问题 : 打开镜像.iso文件,v-box好像是不识别这种格式的,它识别的好像是.vdi等格式,所以要用vm虚拟机打开镜像安装 打开镜像,按照步骤安装后,安装很久后,出现问题.初 ...

  3. HanderBar

    对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构 ...

  4. 201306114357-实验3-C语言

    #include<stdio.h>#include <stdlib.h>#include <time.h>main(){ int a,b,c,n,u,i,sum;  ...

  5. 简话h5唤起本地app

    在没接触这个功能之前,查询各种文档后也只是似懂非懂,做过之后,发现其实很简单,简言之就是通过一个iframe或者a标签来跳转app端提供的URL schema(至于这个URL schema的组成格式, ...

  6. Tools (StExBar vs Cmder)which can switch to command line window on context menu in windows OS

    https://tools.stefankueng.com/StExBar.html https://github.com/cmderdev/cmder

  7. WinForm(WPF) splash screen demo with C#

    https://www.codeproject.com/Articles/21062/Splash-Screen-Control https://www.codeproject.com/Article ...

  8. hive数据导入load导入命令

    LOCAL  指的是操作系统的文件路径,否则默认为HDFS的文件路径 1.向t2和t3的数据表中导入数据 2.导入操作系统的一下三个文件 执行导入命令 3.将HDFS文件中的数据导入到t3中 4.导入 ...

  9. 微信小程序开发UI组件

    第一  view和input和button组件 1.UI组件的通用属性 (1)id       唯一标识 (2)class  设置组件的样式类 (3)style 设置组件的内联样式 (4)hidden ...

  10. PHP常用工具类积累

    第一 请求第三方接口的工具类 例如,封装了get和post请求方法的工具类,代码如下: <?php class HttpClient{ /** * HttpClient * @param arr ...