先总结下区别:

event.clientX、event.clientY

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

event.pageX、event.pageY

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

event.offsetX、event.offsetY

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

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

上图!!!!

clientX,offsetX,screenX,pageX 区别!的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

    clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106  ...

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

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

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

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

  9. jQuery中 pageX,clientX,offsetX,layerX的区别

    一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...

随机推荐

  1. 使用PMD进行代码审查(转)

    原文地址:使用PMD进行代码审查 很久没写博客了,自从上次写的设计模式的博客被不知名的鹳狸猿下架了一次之后兴趣大减,那时候就没什么兴致写博客了,但是这段时间还没有停下来,最近也在研究一些其他的东西,目 ...

  2. 快速理解 FastCGI、PHP-CGI、PHP-FPM

    你(PHP)去和泰国人(web服务器,如 Apache.Nginx)谈生意 你说中文(PHP代码),他说泰语(C代码),互相听不懂,怎么办?那就都把各自说的话转换成英语(FastCGI 协议)吧. 怎 ...

  3. linux hosts.equiv设置解析

    hosts.equiv文件的用途与格式 一. hosts.equiv 文件的用途 /etc/hosts.equiv 和 $HOME/.rhosts 定义了哪些计算机和用户可以不用提供口令就在本地计算机 ...

  4. PHP:第五章——字符串编码函数

    <?php header("Content-Type:text/html;charset=utf-8"); //1.base64_encode和base64_decode.6 ...

  5. 『转』谷歌发布Windows版Chrome App Launcher

    据国外媒体报道,谷歌发布了Windows版Chrome App Launcher,Windows用户现在因此能够使用谷歌的许多网络应用,如Chrome浏览器.Gmail.Google Drive和Ch ...

  6. java远程下载文件到本地

    方法一 ** * 下载远程文件并保存到本地 * * @param remoteFilePath-远程文件路径 * @param localFilePath-本地文件路径(带文件名) */ public ...

  7. 采用Serverless架构搭建Web应用

    本文会向你介绍一种新的可能,一种无服务器的方案来搭建Web应用.使用这个方案大部分运维方面的问题就不需要你自己操心了,而且也省去运行服务器的费用.本文从无服务的优势与限制两方面带您初识Serverle ...

  8. 爸妈才是最好的避孕药--------"北大状元拉黑父母事件的一些感想"

    今天看了这么一篇文章,地址:  http://mini.eastday.com/mobile/180131180318786.html <北大状元拉黑父母6年:你敢恨爸妈,可你敢原谅他们吗?&g ...

  9. DesignPattern(一)设计模式的六个基本原则

    使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替原则.依赖倒置原则.接口隔离原则. ...

  10. 【LGR-051】洛谷9月月赛

    [LGR-051]洛谷9月月赛 luogu 签到题 description 给出\(K\)和质数\(m\),求最小的\(N\)使得\(111....1\)(\(N\)个\(1\))\(\equiv k ...