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. height:100%与height:inherit的区别

    一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...

  2. [iOS] 为文本加上横线方法

    _oldPriceLabel.text = "; _oldPriceLabel.textColor = [UIColor lightGrayColor]; NSMutableAttribut ...

  3. 在ashx文件中制作验证码(使用session要继承IRequiresSessionState)

    必须继承System.Web.SessionState.IRequiresSessionState接口,才能实现Session读写! System.Web.SessionState的一些接口 IRea ...

  4. mysql 学习官网

    http://www.runoob.com/mysql/mysql-install.html

  5. js获取文档高度

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  6. 让textarea完全显示文章并且不滚动、不可拖拽、不可编辑

    textarea { width: 100%; border: none; outline: none; resize: none; overflow: hidden; padding-bottom: ...

  7. Xcode静态检查分析代码

    Clang静态分析和Instruments来剖析代码有一些不同,Clang更致力于在编译的过程中通过自身的一套判断机制来找出代码中潜在的隐患.   在XCode 3.2之后的版本里,Clang已经被集 ...

  8. 手把手教你玩转nginx负载均衡(二)----安装虚拟机操作系统

    引言 在上一篇,我们组装好了虚拟机的硬件部分,那么现在我们就要把操作系统装上了,既然是服务器,那么安装linux操作系统是个比较好的选择,如果你喜欢的话,安装windows也是没有任何问题的 我这里选 ...

  9. url地址的图片路径

    url地址的图片路径: (./images/1.jpg) 中的./指根路径,有或没有都可以: (../images/1.jpg) 中的../指相对路径: (../../images/1.jpg) 中的 ...

  10. log4net配置

    1.configuration配置 <configSections> <section name="log4net" type="log4net.Con ...