clientX 鼠标在页面显示区域的坐标

screenX鼠标在显示屏幕上的坐标

layerX 鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在border的左上角，而不是内容区域的左上角

offsetX 鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！这个属性比较好用，用来判断鼠标点在一个元素中的哪个位置很方便

pageX 鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位

x 跟layerX一个效果，可作为layerX的直接替换属性

offsetLeft:这个属性不是事件对象的属性，而是DOM对象所有的，该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的，设置了position的父对象”中的位置

javascript事件坐标的更多相关文章

  1. JavaScript事件坐标区别（offset，client，page）

    学习笔记. 1. offset:其定位原点是当前元素左上角 2. client:其定位原点是当前窗口左上角 3. page:其定位原点是当前页面左上角 下面来验证一下. 先上代码: <!doct ...

  2. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  3. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  4. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

  5. 【探讨】javascript事件机制底层实现原理

    前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...

  6. javaScript事件（五）事件类型之鼠标事件

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...

  7. JavaScript事件类型

    JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设 ...

  8. javascript事件与event对象的属性

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  9. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

随机推荐

  1. 100.64.0.0/10运营商级(Carrier-grade)NAT保留IP地址

    在一次跟踪路由的网络操作时发现自己路由器下一跳路由节点的IP地址比较奇怪,是100.64.0.1.好奇促使我查询了这个IP地址的归属,结果是保留地址,到这里觉得比较奇怪了,按照常理以IPv4为例保留的 ...

  2. Vim配置:在win10下用vim编译运行C/C++（异步插件管理，一键运行）

    为什么用Vim 重新调配vim,追求尽量简单些. 安装 官网下载 PC: MS-DOS and MS-Windows下的 For modern MS-Windows systems (starting ...

  3. Microsoft.Office.Core 引用以及 Microsoft.Office.Core.MsoTriState 的问题

    转自原文 xiaoanian, Microsoft.Office.Core 引用以及 Microsoft.Office.Core.MsoTriState 的问题 因为要做一个提取ppt文字的工程,第一 ...

  4. Program Size: data=9.0 xdata=0 code=47

    data=47.0 编译器编译后,程序总共需要占用47字节的片内RAM空间.注意这个大小仅仅是累加而已,并未考虑各个块之间的空隙,也就是说实际占用的RAM空间可能多于此数值.xdata=0 程序未使用 ...

  5. Delphi IOS class_addMethod

    class_addMethod 学习FMX.Platform.iOS.pas文件的处理办法 d:\program files (x86)\embarcadero\studio\17.0\source\ ...

  6. struts.xml配置文件（package，namespace，action）

    struts2.0 xml配置 struts.xml文件结构 struts.xml文件是整个Struts2框架的核心. struts.xml文件内定义了Struts2的系列Action,定义Actio ...

  7. LNMP 参数调优 ( 无注释 )

    简介: PHP FastCGI 优点 1.PHP 脚本运行速度更快.PHP 解释程序被载入内存而不用每次需要时从存储器读取,极大的提升了依靠脚本运行站点的性能. 2.需要使用的系统资源更少.由于服务器 ...

  8. Linux下Spark框架配置（Python）

    简述  Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用并行框架,Spark,拥有Hadoop MapReduce所具有的优点:但不同于MapRedu ...

  9. DDA算法

    [DDA算法] Digital Differential Analyzer,DDA算法是一种线段扫描转换算法.(线段光栅化算法) DDA算法优缺点: 1.消除了直线方程中的乘法计算,而在x.y方向使用 ...

  10. 10 华电内部文档搜索系统 search03

    上一节讲解了怎么在Struts 2下面使用内置对象传值,在Struts 2下面是用Session或者Request存放对象.在Struts 2下面是用内部对象传值,和JSP页面下面稍微有些不同.但是实 ...