clientX,offsetX,screenX,pageX 区别!
先总结下区别:
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 区别!的更多相关文章
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...
- event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等
先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...
- event对象的clientX,offsetX,screenX,pageX
chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...
- [1]区分event对象中的[clientX,offsetX,screenX,pageX]
前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...
- pageX,clientX,offsetX,layerX的区别
pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...
- clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解
clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106 ...
- offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...
- pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解
https://www.cnblogs.com/echolun/p/9231760.html
- jQuery中 pageX,clientX,offsetX,layerX的区别
一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...
随机推荐
- MyBatise代码自动生成时候Oralce的number类型BigDecimal问题
使用MyBatise的代码自动生成工具时候,即便在配置文件中定义了 <javaTypeResolver> <property name="forceBigDecimals& ...
- @ModelAttribute运用详解(二十一)
@ModelAttribute使用详解 1.@ModelAttribute注释方法 例子(1),(2),(3)类似,被@ModelAttribute注释的方法会在此controller每个方法 ...
- BZOJ3239 Discrete Logging
一道裸的BSGS题目(叫baby step, giant step) 从爱酱的blog里学来的,是一个很神的根号算法. 如果我们有hash的工具的话,就是O(sqrt(p))的,这里又用了一个map所 ...
- 【LeetCode 1_数组_哈希表】Two Sum
解法一:O(N) vector<int> twoSum(vector<int>& nums, int target) { unordered_map<int, i ...
- ubuntu:NVIDIA设置性能模式,以降低CPU使用、温度
NVIDIA设置性能模式,以降低CPU使用.温度 ubuntu安装完NVIDIA显卡驱动后 终端输入 nvidia-settings 选择OpenGL Settings->Image Setti ...
- 在Linux中批量修改字符串的命令
昨天一个朋友忽然问我,在Linux下如何批量修改字符串,当时瞬间懵逼了,完全想不起来....... 今天特意的重温了一下Linux下的一些常用命令,并将这个遗忘的批量修改字符串的命令记录下来(资料来自 ...
- [团队项目]Scrum 项目1.0 (演说视频)
1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 2.SCRUM 流 ...
- POJ2374 Fence Obstacle Course
题意 Language:Default Fence Obstacle Course Time Limit: 3000MS Memory Limit: 65536K Total Submissions: ...
- 在IIS服务上发布网站
一.打开控制面板中的“管理工具” 二.打开IIS管理器 三.右键网站,选择“新建网站”
- Qt中Qstring,char,int,QByteArray之间到转换(转)
11.各种数据类型的相互转换char * 与 const char *的转换char *ch1="hello11";const char *ch2="hello22&qu ...