clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
screenX 设置或获取鼠标指针位置相对于用户屏幕的 x 坐标。 
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

以上概念来源于网络。具体细节待我理解清楚之后再进行补充说明。

  1. clientX 和x值在实验过程中,没有发现值不一样的例子,所以我认为它们在效果上是一样的!
  2. offsetX 是相对于当前窗口内,本触发事件对象(或者是某一区域)而言,如你单击a区域,值是相对于a所在区域而言!
  3. clientX ,x,offsetX共同点:它们是相对位置,相对于当前窗口,只是offsetX相对于当前窗口的某个触发对象的父容器而言!
  4. screenX是相对与客户端显示器而言,是绝对位置!

clientX .offsetX .screenX x 的区别的更多相关文章

  1. 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...

  2. 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

    通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...

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

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

  4. clientX,offsetX,screenX,pageX 区别!

    先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...

  5. pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解

    https://www.cnblogs.com/echolun/p/9231760.html

  6. event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等

    先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...

  7. event对象的clientX,offsetX,screenX,pageX

    chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...

  8. [1]区分event对象中的[clientX,offsetX,screenX,pageX]

    前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...

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

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

随机推荐

  1. 深度学习笔记——PCA原理与数学推倒详解

    PCA目的:这里举个例子,如果假设我有m个点,{x(1),...,x(m)},那么我要将它们存在我的内存中,或者要对着m个点进行一次机器学习,但是这m个点的维度太大了,如果要进行机器学习的话参数太多, ...

  2. 2>&1

    经常关注linux脚本的人,一定看到过 2>&1 这样的用法,最初一定不明白其中的含义以及为什么是这样的一种组合.昨天偶然间再次看到了这个 2>&1 的写法,遂下决心搞明白 ...

  3. flask源码分析

    本flask源码分析不间断更新 而且我分析的源码全是我个人觉得是很beautiful的 1 flask-login 1.1 flask.ext.login.login_required(func),下 ...

  4. django rest framework 再撸体验

    曾经了解过. 放在一边,嫌麻烦. 如今身为leader,站在团队沟通的角度看看,还不错. 有几个优点: 1. api一览表 2. api web预览界面(类似.net的webservice预览界面), ...

  5. JAVA基础学习——1.2 环境搭建 之eclipse安装及中文化

    安装好jdk,配置好环境变量以后,下面就可以进行安装eclipse了. 闲话少说,eclipse下载地址:http://www.eclipse.org/downloads/ 不大用关注checksum ...

  6. javaee 导航

    tomcate端口设定和服务器虚拟目录设定 静态web 应用和动态web应用 tomcat相关问题 web应用 http 响应 url uri 动态页面 servlet 一个简单的servlet的de ...

  7. java 反序列化PHP

    由于本人所在开发的项目,前期是由php完成的,这里需要对数据库中php序列化的字符串进行反序列化. 1.引入maven依赖 <!--反序列化 php--> <dependency&g ...

  8. testng 失败自动截图

    testng执行case failed ,testng Listener会捕获执行失败,如果要实现失败自动截图,需要重写Listener的onTestFailure方法 那么首先新建一个Listene ...

  9. MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

    场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...

  10. SAP 订单状态跟踪

    *&--------------------------------------------------------------------- *& Program name:  *& ...