pageX,clientX,screenX,offsetX区别
鼠标相对于整个页面的X/Y坐标。
注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。
特别说明:IE不支持!
clientX/clientY:
事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)。
浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算。
当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域。
特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY比火狐下始终大2px。
screenX/screenY
鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
offsetX/offsetY:
得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为:
特别说明:只有IE支持!相当于IE下的pageX,pageY。
e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft = e.pageX
e.clientY + document.documentElement.scrollTop - document.documentElement.clientTop = e.pageY
pageX,clientX,screenX,offsetX区别的更多相关文章
- pageX, clientX ,screenX, offsetX, layerX, ,x的区别
事件对象event的位置属性,这些参数比较容易混淆 1. pageX,pageY :IE不识别的,鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化,其实就是clientY ...
- event对象中offsetX,clientX,pageX,screenX的区别
1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...
- javascript 中 x offsetX clientX screenX pageX的区别
在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...
- pageX,clientX,offsetX,layerX的区别
pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...
- clientX,screenX,pageX,offsetX的异同 【转载】
首先说明一下以上对象都是指javascript中的,不包含其他语言. pageX/pageY: 鼠标相对于整个页面的X/Y坐标.注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000 ...
- 【clientX,offsetX,screenX】 【scrollWidth,clientWidth,offsetWidth】的区别
一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...
- 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- pageX/pageY,screenX/screenY,clientX/clientY的差别
pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...
- offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...
随机推荐
- java 对象的上转型对象(父类)
Example5_10.java class 类人猿 { void crySpeak(String s) { System.out.println(s); } } class People exten ...
- (三)、Struts第三天
(三).Struts第三天 Struts核心业务: (Struts提供了哪些功能?) 1. 请求数据自动封装(params拦截器) 2. struts数据处理方式 * ActionContext ...
- AJAX(XMLHttpRequest)进行跨域请求方法详解(一)
注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站 ...
- iOS 一招搞定去掉字符串开始的0,尤其是针对时间格式化
// 2.利用整型自动去掉开头的0, 不要循环和判断prefix以及截取字符串- (NSString *)pp_formatDateWithArrYMDToMD;{ NSInteger mont ...
- C#入门经典第九章定义类-1
1.C#中使用class关键字来定义类 class MyClass { //代码部分 } 定义了类之后,就可以在项目中能访问该定义的其他位置对该类进行实例化.默认情况下,类的声明是内部的,即只有当前项 ...
- 转: 两个 Shell 网站: explainshell 和 shellcheck
今天向大家介绍两个有意思的 Shell 网站,一个是 explainshell.com,另一个是 shellcheck.net. explainshell 先说 explainshell.explai ...
- POJ 1062 昂贵的聘礼详解最短路变形
POJ上难得一见的中文题…… 思路:建立一个以0为源点的地图,那么Map[0][n]的值代表 第n号物品的价值,Map[i][j]代表用 j 替代 i 后,物品j的价值.我们认为酋长的承诺为节点 ‘ ...
- cin 与 scanf 的不同
cin输入更方便: 首先,cin 是个C++类型对象,它的类型是basic_istream,scanf 是个不定参数的函数,其次,cin 所属的类重载了 >> 运算符,使输入更简单了,比如 ...
- 有关sqlitedrop数据库重建比delete方式来清空数据库更加有效率
今天浏览stackoverflow 发现一个有趣的问题: which was more preferable as performance wise and without error cause t ...
- 在Servlet(或者Filter,或者Listener)中使用spring的IOC容器
web.xml中的加载顺序为:listener > filter > servlet > spring. 其中filter的执行顺序是filter-mapping在web.xml中出 ...