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. oracle startup mount nomount 区别

    看oracle入门书,其中一句话说,使用startup nomount 命令启动例程,不可以和mount open 和exclusive一起使用,这个命令适用于建立数据库或是维护数据库时使用. 于是查 ...

  2. PHP mysql client封装

    config1.inc.php $CONFIG_DATABASE_TXL = array( #array('127.0.0.1', 'root', '', 'he_txl','3306') array ...

  3. PHP RSA加密解密

    1.生成密钥和公钥 开始前需要准备openssl环境 linux 需要安装openssl工具包,传送门http://www.openssl.org/source/ window 下需要安装openss ...

  4. 关于String和StringBuilder、StringBuffer的一个简单性能测试

    String a=String b + String c + String d 这种代码在程序里应该随处可见,一部分人不知道这段代码的缺陷在哪,另一部分人知道这样写不好,但是太顺手了下意识就写了. 在 ...

  5. C# 如何将窗体写到Dll中

    步骤: 1.解决方案资源管理器窗口->右击项目属性 2.属性窗口->应用程序->输出类型(U)->类库

  6. AndroidManifest.xml中声明权限——各种permission含义摘录

    android.permission.EXPAND_STATUS_BAR 允许一个程序扩展收缩在状态栏,android开发网提示应该是一个类似Windows Mobile中的托盘程序 android. ...

  7. cdh 安装步骤

    http://www.cnblogs.com/jasondan/p/4011153.html 关于CDH和Cloudera Manager CDH (Cloudera's Distribution, ...

  8. Linux实战教学笔记35：企业级监控Nagios实践（下）

    七,服务器端Nagios图形监控显示和管理 前面搭建的Nagios服务虽然能显示信息,能报警.但是在企业工作中还会需要一个历史趋势图,跟踪每一个业务的长期趋势,并且能以图形的方式展示,例如:根据磁盘的 ...

  9. Spark之 RDD

    简介 RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变.可分区.里面的元素可并行计算的集合. Resilien ...

  10. 27-水池数目（dfs）

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地 ...